Other Built-in React Hooks: useReducer, useId, useTransition and More

Runnable lesson · press Try it on the examples to edit and run them here.

You have met useState, useEffect, useRef, useMemo, useCallback and useContext. React has more built-in hooks. This lesson is a map, so you know what exists and when to look.

Hooks you will use often later

useId: unique ids for labels

Never write the same id twice on one page, and never generate random ids during render. useId gives a stable id that is the same on the server and the client:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function Field({ label }) {
  const id = React.useId();
  return (
    <div>
      <label htmlFor={id}>{label}</label>{" "}
      <input id={id} aria-label={label} />
    </div>
  );
}

function App() {
  // Two Fields on one page get two different ids
  return (
    <div>
      <Field label="Email" />
      <Field label="Backup email" />
    </div>
  );
}

Do not use useId for list keys.

useReducer in a nutshell

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function reducer(state, action) {
  switch (action.type) {
    case "increment": return { count: state.count + 1 };
    case "reset": return { count: 0 };
    default: throw new Error("Unknown action: " + action.type);
  }
}

function App() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

You describe what happened (dispatch), and the reducer decides the new state. The full story is in Reducers and useReducer.

useLayoutEffect

Like useEffect, but it runs before the browser paints. Use it when you must measure the DOM and change something before the user sees the first frame (a tooltip position, for example). It blocks painting, so use it only when useEffect causes a visible flicker.

useTransition and useDeferredValue

Both help keep the UI responsive during slow updates. useTransition marks an update as low priority, and gives you isPending; useDeferredValue gives a “lagging” copy of a value. See Performance Optimization.

useEffectEvent (React 19.2)

Sometimes an effect needs to read the latest props or state without re-running when they change, for example logging a visit using the current theme. useEffectEvent creates a function that always sees the latest values but is not a dependency of the effect:

1
2
3
4
5
6
7
8
9
10

const onConnected = useEffectEvent(() => {
  showNotification("Connected!", theme);   // always the latest theme
});

useEffect(() => {
  const connection = createConnection(roomId);
  connection.on("connected", () => onConnected());
  connection.connect();
  return () => connection.disconnect();
}, [roomId]);                               // theme is not needed here

It was added as a stable API in React 19.2. Use it only inside effects, and only to reduce unnecessary re-runs; it is not a general-purpose callback.

useSyncExternalStore

Subscribes to an external store (a global data object, the browser’s online status) in a way that is safe with React’s rendering. Libraries use it; you rarely call it yourself.

useImperativeHandle, useDebugValue, useInsertionEffect

• useImperativeHandle customises what a parent can do with a child’s ref (rare).
• useDebugValue labels a custom hook in React DevTools.
• useInsertionEffect is for CSS-in-JS libraries to inject styles. Application code does not need it.

Hooks that are not in react

• useFormStatus (from react-dom): the pending state of the form it is inside.
• useOptimistic (from react): show a result immediately while the real update is in progress.

Key points

• Know the names: useReducer, useId, useTransition, useDeferredValue, use, useActionState, useEffectEvent.
• Reach for them when useState and useEffect start to feel awkward.
• Most apps need only a handful of hooks.