New Hooks in React 18

---

Before we start with new React hooks, let’s first define hooks and why we need them.

A React Hook is a new feature to use React. Component features such as The state object, Life-cycle events, context, refs etc in a functional component.

Hooks enable us to use “class-features” In React by providing a set of built-in functions such as:

• The useState() hook for using states from function components.
• The useEffect() hook for performing side effects from function components. It’s equivalent to life-cycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in React classes.
• The useContext() hook for subscribing to React Context from a function component.
• The useReducer() hook for managing the state of components with a reducer.
• useRef for React Refs.
• The useCallback hook for callbacks.
• The useMemo hook for memoized values.
• The useImperativeMethods hook for imperative methods.
• The useMutationEffect hook for mutation effects.
• The useLayoutEffect hook for layout effects.

we can also create our custom Hooks to re-use any stateful behaviour between different components.

---

React 18 is a major release that comes with new features, such as concurrent rendering, automated batching, transitions, new APIs and hooks. In this article, we will cover the five new hooks that arrived in React 18:

• useId
• useDeferredValue
• useTransition
• useSyncExternalStore
• useInsertionEffect

useId

Until version 18, React did not offer any good way to generate unique IDs that could be used for server- and client-rendered content. The HTML markup that was rendered on the client should match the one rendered on the server. Otherwise, React server hydration mismatch error will be generated.

UseIdExample.jsx

[React] import { useId } from “react”; const UseIdExample = props => { const uid = useId(); return ( ); }; export default UseIdExample; // Next, update the App component to render the UseIdExample. import “./App.css”; import UseIdExample from “./examples/UseIdExample”; function App() { return ( ); } export default App; [React]

useTransition

By default, all React state updates are urgent. Different state updates in our application compete for the same resources, slowing it down. The useTransition React hook solves this problem by letting us mark some state updates as non-urgent. This allows urgent state updates to interrupt those with a lower priority.

[React] import {useState, useTransition} from “react”; function SearchPage() { const [isPending, startTransition] = useTransition(); const [input, setInput] = useState(“”) const [list, setList] = useState([]); const listSize = 30000 function handleChange(e) { setInput(e.target.value); startTransition(() => { const listItems = []; for (let i = 0; i < listSize; i++){ listItems.push(e.target.value); } setList(listItems); }); } return ( ); } export default SearchPage; [React]

useDeferredValue

The useDeferredValue hook allows us to defer the re-rendering of a non-urged state update. Like the useTransition hook, the useDeferredValue hook is a concurrency hook. The useDeferredValue hook allows a state to keep its original value while it is in transition.

[React] import { useState, useTransition, useDeferredValue } from “react”; function SearchPage() { const [,startTransition] = useTransition(); const [input, setInput] = useState(“”) const [list, setList] = useState([]); const listSize = 30000 function handleChange(e) { setInput(e.target.value); startTransition(() => { const listItems = []; for (let i = 0; i < listSize; i++){ listItems.push(e.target.value); } setList(listItems); }); } const deferredValue = useDeferredValue(input); return ( ); } export default SearchPage; [React]

useSyncExternalStore

It allows our React application to subscribe to and read data from external libraries. The useSyncExternalStore hook uses the following declaration:

const state = useSyncExternalStore(subscribe, getSnapshot[, getServerSnapshot]);

This signature contains the following:

• state: the value of the data store that the useSyncExternalStore hook returns.
• subscribe: registers a callback when the data store changes.
• getSnapshot: returns the data store current value.
• getServerSnapshot: returns the snapshot used during server rendering.

useInsertionEffect

The useInsertionEffect hook is another new React hook that works with libraries. However, the useInsertionEffect hook works with CSS-in-JS libraries instead of data stores. This hook addresses style rendering performance issues. It styles the DOM before reading the layout in the useLayoutEffect hook.

Please check here if you want to know more about React 18 new hooks.