Member-only story
5 New Hooks in React 18
Exploring useTransition, useDeferredValue, useId, useSyncExternalStore, useInsertionEffect, and useEffect double mount
Published in
7 min readApr 4, 2022
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