What does re-rendering mean in React?

TL;DR

Re-rendering in React refers to the process where a component updates its output to the DOM in response to changes in state or props. When a component's state or props change, React triggers a re-render to ensure the UI reflects the latest data. This process involves calling the component's render method again to produce a new virtual DOM, which is then compared to the previous virtual DOM to determine the minimal set of changes needed to update the actual DOM.

What does re-rendering mean in React?

Understanding re-rendering

Re-rendering is the process by which React calls a component's function again to compute a new description of the UI. It is important to note that a re-render does not necessarily result in a DOM update — React performs reconciliation against the previous output and may bail out if nothing has changed.

When does re-rendering occur?

Re-rendering occurs in the following scenarios:

When a component's state changes via a useState setter or a useReducer dispatch
When a component subscribed to a context reads a new context value
When a component receives new props from its parent
When a parent component re-renders, its children re-render by default — even if their props are referentially unchanged
When a component's key changes, React unmounts the old instance and mounts a new one (a remount, not just a re-render)

The re-rendering process

Trigger: A state update, context value change, or parent re-render schedules the component for re-rendering.
Render: React calls the component function again to produce a new React element tree.
Reconciliation: React diffs the new tree against the previous one.
Commit: React applies the minimal set of changes (if any) to the actual DOM.

Example

Here's a simple example to illustrate re-rendering:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example:

The Counter component has a state variable count.
When the button is clicked, setCount updates the state, triggering a re-render.
React calls the Counter function again, producing a new element tree that is reconciled against the previous one.
React updates the actual DOM to reflect the new count.

Performance considerations

Re-rendering itself is usually cheap, but unnecessary re-renders of expensive subtrees can hurt performance. React provides several techniques to opt out of re-rendering:

React.memo: A higher-order component that memoizes a function component's output and skips re-rendering if its props are referentially equal (compared with Object.is).
useMemo and useCallback: Hooks that preserve the identity of values and functions across renders so memoized children don't see "new" props.
State colocation: Move state down so fewer components re-render when it changes.

React Compiler

The React Compiler (RC/stable as of 2025) automatically memoizes components, values, and callbacks at build time. With it enabled, much of the manual useMemo / useCallback / React.memo work becomes unnecessary — the compiler inserts the optimal memoization for you. The mental model still matters for debugging, but the optimization story is shifting from "manually memoize hot paths" to "write idiomatic code and let the compiler memoize."

What does re-rendering mean in React?

TL;DR