No More Hustleporn: What's New in React 18?

Tweet by Josh W. Comeau

Indie hacker and educator.
CSS for JavaScript Developers: http://css-for-js.dev

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. 🔥

2. Transitions!

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:
reactjs.org/blog/2022/03/2…

What are you most excited about?