Create React App 4.0 | Hacker News Reader

Create React App 4.0

github.com

62 pointsdarekkay19 comments

I have a hobby project in react which I started using CRA. It only have few screen but uses material UI and few other libs so the minified bundle size already over 700k without splitting. In dev the refreshes became slow to the point where I have wait a few seconds to see result after I change a file in IntelliJ. So I wanted to give snowpack a try, and the results are amazing, In a blink of eye the browser screen is updated and state is preserved.

I read the linked issue on react-refresh on the release note, but no idea if it fast enough or not.

For the love of all mighty, if you happen to use the TS template DO NOT FOR A SECOND assume you’re using it in strict mode.

For whatever reason CRA has a different hidden env var flag that controls this even though you have a “strict: true” in your tsconfig file.

This may have to do with Babel compiling typescript. It might run the type-checking separately and compile regardless of if it passes.

I jumped into a greenfield project that had been already polluted and “using” TS. The build was still running with a 1/0 and other explicitly broken code somehow.

I'm curious how this compares to Next.js. Next.js has had fast refresh for a while, and works great as an all-in-one solution for React websites.

I think the main difference is CRA has the concept of "ejecting", allowing you to avoid interacting with config files until you really need to customize how the build works.

Next.js is more opinionated, has more features, and provides server-side rendering. You might choose one or the other for different use cases.

Next.js is severely restricted by its proprietary router. CRA has the downside of not supporting server rendering, but you can at least use the standard react-router.

Both the standard react router and nextjs framework are open source.

So what? If NextJS doesn't support another router, you're not gonna patch it in unless you want to continually be out of sync with the main branch.

That does not mean that it is proprietary, see https://en.wikipedia.org/wiki/Proprietary_software

The weird proprietary was used colloquially, not to mean "not open source". In this case, it means something that is only used in relation to one other thing, which is NextJS.

I obviously did not mean it literally.

I'm curious about restrictions of the next.js router compared to the standard react-router, are there specific serious restrictions you've experienced?

I've found the next router pretty easy to deal with, and have been writing less code to achieve the same things over time as next.js matures.

Next doesn’t support nested routes and layouts. So if you have, for example, a page that has a a sidebar for a master/detail view, when you load the nested page it blows away the whole DOM and has to render the whole page again, meaning you lose your scroll positions and anything else you want to persist across pages.

React Router on the other hand lets you render subroutes directly into an ‘outlet’, maintaining the DOM state outside of it.

This is a super common pattern when you’re building something like an admin dashboard app which I do often.

Yep. Lack of support for nested routes is what's keeping me away from Next.js too. A tab view that doesn't rerender the whole page requires jumping through many unofficial hoops with Next.js.

Even standard patterns like having seperate components for page header, sidebar that doesn't rerender the main content section feels very hacky with Next.js, and that too after digging through many people's blogs to read how they accomplished that.

I guess next.js really wants you to ditch the whole SPA idea atleast when it comes to routing.

I hope folks also explore more moderate patterns like server rendering only the first page load (either with react dom or using state hydration) or exploring better separation of client bundles too, and figure out what works best for them. Rather than sticking to whatever next.js or CRNA are set up for by default

Anyone have recommendations for express api scaffolds in the same vein (and easily compatible with CRA).

I’m looking for something that bakes in background jobs, db structure, and deploy scripts but haven’t found anything with comparable community/usage.