Suggest an edit

Improve this article

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

## 1. A **state** change

Every call to `setState()` or `setCount()` (in `useState`) **triggers a re-render** of the component.

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

console.log('Re-render!');

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

Every click calls `setCount`,
`count` changes,
React **calls the component again** to update the UI.

If you call `setCount(count)` with the same value, React **will not re-render**,
because the state did not change (React does a shallow comparison).

---

## 2. A **props** change

If the **parent component** passes new props,
React **re-renders the child component** so it shows the updated data.

```javascript
function Child({ value }) {
  console.log('Re-render Child!');
  return <p>{value}</p>;
}

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

Every time `count` changes, `<Child />`'s `value` prop **changes**,
and it **re-renders**.

To **avoid unnecessary re-renders**, you can use
`React.memo(Child)`, so the component re-renders **only when props change**.

---

## 3. A **context** change

If you use `useContext()` and the value in `Context.Provider` changed,
**every consumer of that context** will be **re-rendered**.

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

function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>
        Switch theme
      </button>
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  console.log('Re-render because of context!');
  return <div className={theme}>Toolbar</div>;
}
```

When the theme changes (`setTheme`), the context updates,
and every component using `useContext(ThemeContext)` **re-renders**.

---

## 4. Parent re-render → children re-render

If a **parent re-renders**, React **by default** re-renders all of its descendants,
**even if their props did not change**.

To avoid this:

- wrap the child component in `React.memo()`;
- or use **memoized values and callbacks** via `useMemo()` and `useCallback()`.

---

## 5. Calling `forceUpdate()` (rare)

In class components you can explicitly call `this.forceUpdate()`,
which forces React to **perform a re-render**, even if `state` and `props` did not change.

---

## 6. Changes in the parent tree or keys (`key`)

If a component's **key (**`key`**)** changes, React **remounts** it (unmount → mount),
which effectively **redraws it from scratch**.

---

## Important to remember:

- **Re-render ≠ DOM update.**
React may call the component again, but **will not touch the DOM**,
if the JSX result **did not change** (diff = 0).
- React optimizes this using the **Virtual DOM** and **Reconciliation**.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.