React Team released a new major version of React with new features that include automatic batching and startTransition. Streaming server-side rendering with support for Suspense is also included.
React 18.0 introduces a new feature: the concurrent renderer, which replaces React's old synchronous rendering and improves the responsiveness of apps. This option is only activated when using the concurrent feature, but it can make a big impact on how applications are built in the future.
React 18 adds concurrency, which will be useful for developers but maybe more complicated for library maintainers.
Concurrency is not an official React feature. It's a hidden mechanism that enables React to make several copies at the same time as your UI. You can think of concurrency as a detail - because it unlocks features. React has sophisticated techniques for its internal implementation, like queues with priorities and buffers. But you won't find these concepts in our public APIs.
With React 18, you will be able to use concurrent features. You can use startTransition to navigate between screens without blocking user input. Or useDeferredValue to throttle expensive re-renders. React18 is now available on npm with Server Components still in development.
Following are the ew hooks that are added in React 18:
- userId - useId is a new hook for generating unique IDs on both the client and server, while avoiding hydration mismatches.
- useTransition - useTransition and startTransition let you mark some state updates as not urgent. Other state updates are considered urgent by default.
- useDeferredValue - useDeferredValue lets you defer re-rendering a non-urgent part of the tree. It is similar to debouncing, but has a few advantages compared to it.
- useSyncExternalStore - useSyncExternalStore is a new hook that allows external stores to support concurrent reads by forcing updates to the store to be synchronous
- useInsertionEffect - useInsertionEffect is a new hook that allows CSS-in-JS libraries to address performance issues of injecting styles in render.
