Member-only story

5 New Hooks in React 18

Exploring useTransition, useDeferredValue, useId, useSyncExternalStore, useInsertionEffect, and useEffect double mount

Jennifer Fu
Better Programming

--

Photo by Zane Lee on Unsplash

React 18 was released on March 29, 2022. It introduces 5 new hooks in the release:

  • useTransition
  • useDeferredValue
  • useId
  • useSyncExternalStore
  • useInsertionEffect

In this article, we are going to explore these hooks in detail.

Set Up Working Environment in Create React App

We use Create React App as a base to explore these new hooks. The following command creates a React project:

npx create-react-app react-release-18
cd react-release-18

The React versions automatically point to React 18. At the time being, It still uses the legacy root API. If you execute npm start, there will be a warning message:

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

--

--

Responses (6)

Write a response