React 18 has launched on npm with new features!

React 18 has launched on npm with new features!

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.

Check the official React Blog for more details


Resources for You

ChatGPT Guide For Software Developers

Learn to use ChatGPT to stay ahead of competition

Front-End Developer Interview Kit

Today, Start preparing to get your dream job!

JavaScript Developer Kit

Start your JavaScript journey today!

Are you looking for Front-end Developer Job?

Get Front-end Interview Kit Now, And Be Prepared to Get Your Dream Job

Get Front-end Interview Kit

Newsletter for Developers!

Join our newsletter to get important Web Development and Technology Updates