All you need to know about React 18

Updates on Client Side

Things to update to support the new version

1. Install package
   npm install react@18 react-dom@18

2. ReactDOM.render is no longer supported in React 18. Use the new createRoot API

reactDOM.render(<App />, document.getElementById(root));

 import ReactDOM from react-dom/client import App from ./App const root =  ReactDOM.createRoot(document.getElementById(root); root.render(</App>);

Changes in Render callback

The render callback is removed from the new root API. But we can pass it as property to the root component.
root.render(</App callback={() => console.log("rendered")}>);

Improvements

1. Automatic Batching support for async calls

What is batching?
Multiple setState calls gets combined together and then re-render only once.

Why is it needed?
Few re-renders for better performance
Before v18, the automatic batching used to happen for all state updates in react event handlers.
After v18, the automatic batching supports async functions

fetch('/someapi').then() => {  setIsFetching(false);  setError(null);  setFormStatus('success')});

Re-rendered only once after v18 as compared to prev versions where it is re-rendered thrice for the given example.

Can we opt out of automatic batching?
YES. Usually, batching is safe, but some code may depend on reading something from the DOM immediately after a state change. For those use cases, you can useReactDOM.flushSync()to opt out of batching.

import { flushSync } from react-dom;flushSync(() => { // wraps state updates});

2. Support for Suspense in Server Side Rendering (SSR)

What is SSR?
Technique were you render the HTML output of your react component and send the HTML from the server. So that the user has some UI to look at while the Javascript bundles are loading and before it becomes interactive.

What is Suspense?
Suspense is a concept to show a placeholder/ fallback component until the component is ready.

<Suspense fallback={<Loader/>} >  <Component /></Suspense >

Before v18, Suspense was introduced on client-side in in 16.6v (2018).On server side, it would render all or nothing to the user impacting the performance.
After v18, It provides support to render the website faster and improves the initial load time.

3. Concurrency

What is Concurrency ?
Simply means interrupting an ongoing task.
We can tell react which updates are less urgent and can be delayed.
Urgent state updates can be prioritised over less priority updates.

Previously state updates order in which they were triggered.
With v18, we can change the priority using new API's called Concurrent Features-
1. useTransition()
Used in functional components.
If there are 2 consecutive state updates, it may block the rendering of the UI, if the any of the update is expensive . So we can lower the priority of the state updates by wrapping them in useTransition

const [isPending, startTransition] = useTransition();setInputValue(value); startTransition(() => {//less priority setResult(results)})return (isPending && <Spinner />)

2. useDeferredValue() -

Tell react to show older value, until the new value is ready similar to startTransition but cannot be used in cases where you dont have full control over state update. Maybe the state update is happening in other 3rd party library and you just have the updated value.

const deferredVal = useDeferredValue(stateValue)


Updates on Server Side

There are some updates on react-dom/server API's to support suspense and streaming the server side page
renderToString(React.Node)
renderToPipeableStream(React.Node, options)

New APIS for library developers

(As app developer, you we dont need these)

1. useSyncExternalStore - is a new hook that allows external stores to support concurrent reads
2. useInsertionEffect - is a new hook that allows CSS-in-JS libraries
3. useId - is a new hook that generates unique ids for components. Useful for design systems

Conclusion

These new features makes the websites faster, giving a good user experience and optimises the performance mainly in SSR.
Things to look forward to in upcoming versions -

• Suspense supporting data fetching where manually rendering the fallback component is taken care by react itself
• Server components (alpha stage) to use react components on server side.