What does "transition" do in the render lifecycle?

ReactMiddle~3 min read

What "transition" is in React

Transition is a way to tell React: "This part of the update isn't urgent, do it in the background whenever convenient, but don't block the UI while doing it."

React uses transitions to distinguish between two types of updates:

Update type	Example	Priority	What React does
Urgent	Typing, a click, scrolling	High	Executed immediately, without pauses
Transition	Loading a list, filtering, navigation	Low / medium	Can be deferred, interrupted, and resumed

Where transitions appear in the lifecycle

Transition is part of the render phase. During rendering, React checks which update is currently happening, urgent or transitional, and decides how to schedule the work.

Transitions do not affect the commit phase, but they change the behavior of the render phase:

Phase	Description	What transition does
Render Phase	React computes what needs to change	Transitions can run in the background and be interrupted
Commit Phase	React commits changes to the DOM	Happens only after the transition finishes
Post Commit	Effects, `useEffect`, `useLayoutEffect`	Run once the transition has finished

A practical example

javascript

import { useState, startTransition } from 'react';

function SearchApp() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function handleChange(e) {
    const value = e.target.value;
    setQuery(value); // urgent update (typing)

    startTransition(() => {
      // transition (background) update
      const filtered = bigData.filter(item => item.includes(value));
      setResults(filtered);
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      <List results={results} />
    </>
  );
}

What React does:

The user types, so the urgent setQuery update runs instantly. -> React immediately updates the <input> (commit phase).
startTransition marks the filtering (setResults) as not urgent. -> React can pause it if the user keeps typing.
As soon as the thread is free, React finishes building the Virtual DOM and performs the commit.

Result: the input field never lags, and the list loads smoothly, without blocking.

How React uses transitions in the render lifecycle

An update is triggered

React receives several setState calls.
It marks which are urgent and which are transitions (startTransition).

Render Phase

React starts computing the Virtual DOM for the transition.
If an urgent update arrives, React pauses this render.
It saves the progress and resumes it later.

Commit Phase

As soon as all the needed data is ready, React commits changes to the DOM.
Urgent updates always commit before transition ones.

Post-Commit

Effects (useEffect) and useLayoutEffect run after the commit finishes.
React guarantees the UI is stable.

How transitions affect hooks' lifecycle

Hook	What happens during a transition
`useState`	Updates inside `startTransition()` get a low priority
`useEffect`	Runs only after the transition's commit
`useLayoutEffect`	Still synchronous, but can be deferred until the transition finishes
`useDeferredValue`	The transition equivalent for a single value: defers its update
`useTransition`	Lets you control the transition and know whether it's currently in progress (`isPending`)

`useTransition()` in action

javascript

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setList(expensiveCompute());
});

return (
  <>
    {isPending && <Spinner />}
    <List items={list} />
  </>
);

Here:

startTransition makes setList low priority;
isPending is true until React finishes the commit for the transition;
React can cancel and recompute the render if the user enters something new during the transition.

Why transitions matter so much for the lifecycle

Before React 18	After React 18 (with transitions)
All updates ran immediately	React distinguishes urgent from background updates
The render phase blocked the thread	The render can be interrupted and resumed
The UI "froze" during heavy computations	The UI stays responsive
No control over priority	Priority can be managed with `startTransition()`

Visually

javascript

Event → setState() → urgent update (Render + Commit)
                    ↳ startTransition() → background Render (can be paused)
                                           ↓
                                           Commit → useEffect → UI ready

Summary

Transition is a mechanism built into the React 18 lifecycle that lets rendering be prioritized, smooth, and non-blocking.

What it does	How it affects things
Marks updates as "not urgent"	React can defer or interrupt the render
Separates urgent and background changes	The UI stays responsive
Works inside the Fiber render phase	Controls the scheduling of updates
Used with `startTransition()` or `useTransition()`	Gives the developer control

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.