Suggest an edit

Improve this article

Refine the answer for “What does "transition" do in the render lifecycle?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. The user types, so the urgent `setQuery` update runs instantly.
-> React immediately updates the `<input>` (commit phase).
2. `startTransition` marks the filtering (`setResults`) as **not urgent**.
-> React can **pause** it if the user keeps typing.
3. 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

1. **An update is triggered**
  - React receives several `setState` calls.
  - It marks which are urgent and which are transitions (`startTransition`).
2. **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.
3. **Commit Phase**
  - As soon as all the needed data is ready, React commits changes to the DOM.
  - Urgent updates always commit before transition ones.
4. **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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts801 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.