A guide to React 18 hooks

What are React hooks?
Hooks are the new patterns that got introduced in React 16.8 version. The React hooks brought those features alive that we were able to do in class components but this time in the functional components. This means these React Hooks Apis could help us interact with the React local states, the lifecycle features and many more things.

React hooks

The existing React Hooks and how we use them

  1. useEffect: This hook helps to perform the side effects in the functional components like updating the Dom, and fetching data. It accepts a function which will by default run every time the component re-renders. We can stop this rendering by passing some conditions in the dependency array which is the second argument of useEffect.

Let's roll on to the new hooks of React 18

  • useId

Let's dive into these new hooks

  1. useId:

This hook is helpful where we need to use some unique ids. This way React has proved that it will help us to generate unique IDs. These unique ids could be used for server- and client-rendered content. This even avoids mismatching in the server-side rendering which can cause problems.

Another way we can think of is when we create a form we can suffix/prefix this id for example id+ firstName. This way we can have multiple unique ids.
Example code:

2. useSyncExternalStore:

From the name this hook itself clarifies that it will help in sync with the external data sources. We can read and subscribe from external data sources. This is a library hook developed mostly for the library authors to integrate.
How to use this? This method accepts three arguments:

  • subscribe: It is to register a callback that is called whenever the store changes.
import {useSyncExternalStore} from 'react';
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
const selectedField = useSyncExternalStore(store.subscribe, () => store.getSnapshot().selectedField

getSnapshot is used to check if the subscribed value has changed since the last time it was rendered, so the result needs to be referentially stable. That means it either needs to be an immutable value like a string or number, or it needs to be a cached/memoized object.

3. useDeferredValue:

The hook tracks a value. If the value changes from an old value to a new one, the hook can return either of the values. The benefit of using `useDeferredValue` is that React will work on the update as soon as other work finishes

const [searchInput, setSearchInput] = useState(“”);
const searchInputDeferred = useDeferredValue(searchInput);

Here a deferred version of the search input is created.
Visit this for an example: https://github.com/joakimsjo/useDeferredValue-example
More info here: https://github.com/reactwg/react-18/discussions/129

4. useInsertionEffect:

This hook should be used by css-in-js library authors. This hook is limited in scope and does not have access to refs. The hook is fired before all DOM updates. For developers, useEffect or useLayoutEffect should be preferred instead. We all know about the useLayoutEffect which is fired before a useEffect the useInsertionEffect even runs before the useLayoutEffect.

5. useTransition

As the name indicates this hook helps in transition updates.

React state updates are basically of two types. One of them is transition updates that are responsible for the transformation of the UI. The other one is the deflection that we see like click drag etc. The useTransition hook allows us to specify some state updates as not as important. By this, we can tell React to prioritise some lower updates to greater prioritised updates, and the application seems much easier to use.

const [isPending, startTransition] = useTransition();- `isPending` is a boolean. It's React telling us whether that transition is ongoing at the moment. - `startTransition` is a function. We'll use it to tell React _which_ state update we want to defer.

Example for use transition: https://codesandbox.io/s/elastic-vaughan-ykzsi0?file=/src/index.js

More info here: https://blog.webdevsimplified.com/2022-04/use-transition/

So finally we have got some overview of these newly introduced React Hooks, believe me, these hooks are going to help us a lot to increase performance, help in the efficient client as well as server-side rendering and give us more control over React as a whole

Let's start using them and see the magic.

Originally published at https://www.simranraj.in.



Engineering at Intuit https://www.simranraj.in

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store