Suggest an edit

Improve this article

Refine the answer for “Component re-render decision”. 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)

## Short answer

React **re-renders a component (re-render)** when:

1. **Its state (**`state`**) changes**
2. **Its properties (**`props`**) change**
3. **The context (**`context`**) changes**, if it is used in the component
4. **Its parent was re-rendered**, and passed it **new props** (or even the same ones, but without optimization)

---

## 1. Change to `state`

If `setState` (or `setCount`, `setUser`, etc.) is called inside a component, React **triggers a re-render of that component**.

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

return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}
```

Each call to `setCount()` -> React **creates a new Virtual DOM tree for this component** and **compares** it with the previous one (diffing).

---

## 2. Change to `props`

If the parent component passes new `props`,
React **re-renders the child component** to display the updated data.

```javascript
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  const [name, setName] = useState("Alex");
  return <Greeting name={name} />;
}
```

When `setName("Maria")` -> React re-renders `App`,
and then `Greeting`, because its `props.name` changed.

---

## 3. Change to context (`useContext`)

If a component subscribes to a context via `useContext`,
it **re-renders when the context value changes**.

```javascript
const ThemeContext = createContext("light");

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}

function App() {
  const [theme, setTheme] = useState("light");

return (
    <ThemeContext.Provider value={theme}>
      <Button />
    </ThemeContext.Provider>
  );
}
```

`setTheme("dark")` -> every component using this context **re-renders**.

---

## 4. When the parent re-renders

Even if `props` did not change by value,
React still **re-renders the child component by default**
if the parent was re-rendered.

```javascript
function Child() {
  console.log("Child render");
  return <p>Child</p>;
}

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child />
    </>
  );
}
```

Each click -> `Parent` updates ->
`Child` also **re-renders**, even though it has **neither state nor props**.

To avoid this, `Child` can be wrapped in:

```javascript
export default React.memo(Child);
```

Now React will re-render `Child` **only if its props changed**.

---

## What does *not* cause a re-render

Changing variables outside `state`

```javascript
let count = 0;
function Counter() {
  count++;
  // React doesn't know about count - it isn't from state
}
```

Changing an object "around" `setState`

```javascript
state.user.name = "Maria"; // React will not track this
```

Directly changing the DOM (`document.querySelector`)
React manages its own Virtual DOM - it does not track manual changes to the real DOM.

---

## How React decides *exactly what* to update

After React decides that a component must be re-rendered:

1. It **calls the component function again** (to get the new JSX).
2. Creates a **new Virtual DOM tree**.
3. Compares it with the previous one (diffing).
4. **Changes only what** actually changed in the real DOM (reconciliation).

---

## Optimization: when re-rendering is not needed

Use `React.memo()` for functional components:
it will re-render only when `props` change.

Use `useMemo()` and `useCallback()`,
so functions and computations are not recreated unnecessarily.

Pass **stable values** (id, name, etc.),
not new objects/functions on every render.

---

## Summary

| Reason | Does the component re-render? |
|---|---|
| `state` changed | Yes |
| `props` changed | Yes |
| Context changed | Yes |
| Parent re-rendered | Yes (unless `React.memo`) |
| A variable outside `state` changed | No |
| Direct DOM change | No |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.