React 18 is now official

Yes, after months in beta mode now react 18 is live. I have followed the news about React 18 some time in the previous year I think. To me I was excited to learn more about concurrent mode when I first heard about that. So now when it is out what to expect then.

What to expect

Concurrent Mode

Concurrent is under the hood mechanism that react enables to prepare multiple versions of app ui at the same time according to React announcements. This means I can expect that my apps can be made to be faster more responsive in the future when important UI updates are prioritised to render first and less important things can be done later.

React mentioned that they will introduce Offscreen component so that implements this pattern. I think this one can be used for example calculating heights of a gallery then is under viewport for example. For my current project I think concurrent can be useful for updating components that need extra requests from server but users can live without the results for example we have a component that show images for options that users can choose from and without images users can still choose based on text.

Suspense

Suspense has been around for a while, to be honest apart from React.Lazy for loading async components I have not used this one so much. I do not have big expectations for that actually.

Automatic Batching

Yeah I think it is cool and good for performance. State updates are now batched automatically, good job!.

Transitions

new hooks useTransition and a method startTransition are made for this purpose. This one is a part of concurrent mode I think. I think I can use startTransition in polling logics for updating content.

New Client and Server Rendering APIs

a small change needed to do in our apps to have new features of react 18. Just do it I think.

New Hooks

• useTransition, a hook that I want to try first which gives better user experience.
• useDeferredValue, I think this hook can be used to for components like search that listen on changes from an input then send to server and render the results back from server. Normally you will need setTimeout or debounce for sending only the last input when users stop typing. This one I want to try immediately also.
• useSyncExternalStore, according to react so it will subscribe changes from external store and read the data accordingly. I first saw the usage of this hook in y-immer. I think I will need to test this hook before coming up with any ideas to use this hook in my projects.