No More Hustleporn: What's New in React 18?
Tweet by Josh W. Comeau
Indie hacker and educator.
Previously @gatsbyjs, @concordia_btcmp, @khanacademy, @unsplash. He/Him🌈
The next major version of React, React 18, just launched. There's some *really* cool stuff in this one, and it sets the stage for even more stuff in the future! 😮
Gonna share some of the things I'm most excited about in-thread. 🧵
1. The `useId` hook!
In order to build accessible forms, we need to give each input a unique ID. Often, we generate those using `Math.random()`.
If we use server-side rendering, though, it generates two different random values! 😬
`useId` is an SSR-safe unique ID generator. 🔥
Have you ever typed in a text input, and there was a noticeable delay between your typing and the value showing in the form?
Some React state changes need to be lightning-quick, otherwise they feel terrible. The new Transition APIs help with this.
With `useTransition` and `startTransition`, we can de-prioritize larger state changes (like re-painting a set of search results). That way, slower state changes don't affect quicker ones (eg. typing in a search term).
This one is BIG. 🔥
3. Improved automatic batching
For a while, React has batched multiple updates together if they happen in an event listener. If an `onClick` handler calls multiple `setX` functions, the updates will be batched.
Now that happens all the time, even outside event listeners!
When React 17 came out a year or two ago, there weren't any big new features. It was all about planting the seeds for the future. Well, now we're starting to harvest. 😄
And it feels like we're just getting started!
The release notes hint at some amazing upcoming stuff, like a component that can be used to pre-render stuff before it's needed (<Offscreen>).
Also, suspense improvements intended for meta-frameworks like Next/Remix. REALLY excited to see where that goes!
I started using React in early 2015. It very quickly became my front-end tool of choice. And it just keeps getting better.
I'm so excited to see how new features improve the accessibility and user experience of our applications. 😄
You can (and should!) read the full release notes here:
What are you most excited about?