React 18 release candidate mode is finally here!!

#react #webdev #javascript #react18

React is an open-source JavaScript UI library designed by Facebook, it has gained a lot of popularity in the front-end developer community.

React has finally released React 18 in Release Candidate mode and has some exciting features and updates for the React.js development community. That means it is now officially stable in a way and there will not be lot more changes or lot more things added to react 18.

So now React 18 is in release candidate mode you can go ahead and now install npm install react@rc it will install a release candidate version for you.

Let's look at what is new in React and what you can expect!

1. Concurrent Rendering

So the biggest thing obviously which react 18 brings is concurrent rendering and this had been renamed from concurrent mode to concurrent rendering so that you know there's not a breaking versus a non-breaking mode in react now this is just concurrent rendering where react would try to render stuff concurrently whenever you're using ReactDOM.createRoot instead of ReadDOM.render

2. Server Rendering APIs

Earlier from a server-side you could have streamed the response to the client and that would have worked but it did not support the concurrent rendering and suspense very properly. So react 18 also adds support for a new couple of functions which properly streams not only the response but also with the ability to hold data for suspense and whenever that arrives it can stream the rest of the stuff.
So again this is required for things like React Server Components might use and might benefit from this new streaming API.

3. Automatic Batching

React 18 also brings in support for batching the state updates. Batching is when React groups multiple state updates into a single re-render for better performance. Earlier react also used to batch state updates for example if setA(5) and setB(7) where setA and setB are two state variables and of course it will batch them together nut there were certain conditions where react would not batch them for example in setTimeout. So, that is now fixed or in a way improved in react 18.

// Before React 18 only React events were batched

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

4. useId

There is a new Hook useId which actually gives you a deterministic and stable unique identifier both on client and server.
So what happens when your server delivers some react server-side rendered document to the client, of course, that is delivered as an HTML file but you still have to rehydrate that with JS, so this rehydration process sometimes results in a mismatch between what JavaScript expects on the client versus what has been sent from the server and usually that is in cases of keys or stuff which is client-specific and so on.
SO userId is a new hook that allows you to create deterministic keys or deterministic values on server and client both and it's useful in fact it's important in React 18 because of how concurrent rendering works and how things will arrive out of order on the client.

5. Dropping support for Internet Explorer

React is now dropping its support for internet explorer completely. Now internet explorer has arrived at its end of life. React 18 cannot support it because of these concurrent rendering and interesting features which requires things like micro task queues for scheduling and interrupting the main thread allowing the user input to interrupt the main thread when react is working so all of those things are very hard to bring support to internet explorer.

Conclusion

So, these were the top 5 changes react 18 is bringing. React 18 is still in release candidate mode now so you can install react@rc and react-dom@rc in react release candidate mode as well and get started with your React 18 journey. And of course, this will pass on the benefits to frameworks like NextJS and Remix also because these things also use react as the underlying library.