React 18 – New Features & Improvement Strategies

On March eighth, the React group delivered the React 18 RC(Release Candidate). The most recent delivery has brought various new elements that would change the coding design in various application. It carries alongside it, several presentation enhancements which I will cover in this blog.

Concurrency

Concurrency is a property of frameworks where a few cycles are executing simultaneously, and could possibly associate with one another. Excessively perplexing? How about we separate it. Suppose a race that is being directed. Presently, simultaneousness is the number of individuals are running for a solitary race in an equal track..

file

Concurrency is another component that React 18 has presented. A new behind-the-scene component empowers React to set up various forms of the UI simultaneously.

In this component, in contrast to past cases, React may begin the delivering, stop in center for some basic errand and resume delivering once more. The main thing to remember is that it might likewise leave in process render out and out. Respond ensures that the UI seems predictable despite the fact that the render is interfered.

This gives the capability of React to prepare screens in the background - without blocking the new thread!

Automatic Batching

Batching is the phenomenon via which React groups multiple state updates into a single re-render for better performance optimisation.

file

Previous to React 18, batch updates were performed for react-based event handlers. However for promises, setTimeouts, native event handlers or any other events, batch updates were not performed. React 18 performs automatic batch updates for the above mentioned cases too.

Let's understand this using a code.

setTimeout(() => {
  setCount(count => count + 1);
  setFlag(flag => !flag);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Identically, the above code behaves the same as this:

fetch(/*...*/).then(() => {
  setCount(counter => counter + 1);
  setFlag(flag => !flag);
  // React will only re-render once at the end (that's batching!)
})

In case, you don't want to batch, you can use ReactDOM.flushSync() . Let's understand with a bit of code

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleFlushesClick() {
  flushSync(() => {
    setCounter(counter => counter + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(flag => !flag);
  });
  // React has updated the DOM by now
}

Strict Mode in React

The Strict Mode in development server brings forth a couple of interesting changes in React 18. This mode essentially provides out-of-box performance for React.

This new check will automatically unmount and remount every component, whenever a component mounts for the first time, restoring the previous state on the second mount.

The series of events during mounting now:

I. React mounts the component.

Layout effects are created.
Effects are created.

II. React simulates unmounting the component.

Layout effects are destroyed.
Effects are destroyed.

III. React simulates mounting the component with the previous state.

Layout effects are created.
Effects are created.`
During unmounting, the following events occur

New Hooks

a. useId

useId is a new hook for generating* unique IDs on both the client and server, while avoiding hydration mismatches. This generates an *unique string containing : which does not collide with css selectors and querySelectorAll

You can also use userId with identifierPrefix in order to prevent collision in multi-root applications. For multiple IDs in the same component, append a suffix using the same id.

b. useDeferredValue

useDeferredValue will let you defer re-rendering a non-urgent part of the tree. Remember we talked about non-urgent rendering? It is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen.

c. useSyncExternalStore

useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous. It removes the need for useEffect when implementing subscriptions to external data sources.

Code snippet:
const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);
subscribe: function to register a callback that is called whenever the store changes.
getSnapshot: function that returns the current value of the store.
getServerSnapshot: function that returns the snapshot used during server rendering.

d. useInsertionEffect

useInsertionEffect(didUpdate);

useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render. This hook will run after the DOM is mutated, but before layout effects read the new layout.

This hook will help in calculating layout in sync with the concurrent re-rendering.

Conclusion

There are others small but significant updates too - for example using the createRoot() hook rather than ReactDOM.render. This method will be used to render a DOM element and umount using root.unmount()

Other than than React also have streaming Suspense support for servers using renderToPipeableStream& renderToReadableStream

React developers keeps on focusing on the enhancement and improvement and couple of bug fixes in this released version. The update is not meticulous and can be done in a morning session, itself. So what's the wait for , application developers? Let's upgrade our library and start working! Kudos to the React team!

Reference Link: 参考链接