React re-renders guide: why React components re-render
Tags: javascript, webdev, tutorial, react
Published: 2022-08-08 09:53:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4csyp3xjep73p2ybuin2.png)


Originally published at [https://www.developerway.com](https://www.developerway.com). The website has more articles like this 😉

---

This is [part 1](https://www.developerway.com/posts/react-re-renders-guide#part1) & [part 2](https://www.developerway.com/posts/react-re-renders-guide#part2) of the [full guide on React re-renders](https://www.developerway.com/posts/react-re-renders-guide). The guide explains what are re-renders, what is necessary and unnecessary re-render, what can trigger a React component re-render.

The [full guide](https://www.developerway.com/posts/react-re-renders-guide) also includes the most important patterns that can help prevent re-renders and a few anti-patterns that lead to unnecessary re-renders and poor performance as a result. Every pattern and antipattern is accompanied by visual aid and working code example.

Full guide table of content: 

<ul>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part1">Part 1: what is re-render in React?</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part2">Part 2: when React component re-renders itself?</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part3">Part 3: preventing re-renders with composition</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part4">Part 4: preventing re-renders with React.memo</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part5">Part 5: improving re-renders performance with useMemo/useCallback</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part6">Part 6: improving re-renders performance of lists</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part7">Part 7: preventing re-renders caused by Context</a>
        </li>
      </ul>

---

<h2>What is re-render in React?</h2>

When talking about React performance, there are two major stages that we need to care about:

* **initial render** - happens when a component first appears on the screen
* **re-render** - second and any consecutive render of a component that is already on the screen

Re-render happens when React needs to update the app with some new data. Usually, this happens as a result of a user interacting with the app or some external data coming through via an asynchronous request or some subscription model.

Non-interactive apps that don’t have any asynchronous data updates will **never** re-render, and therefore don’t need to care about re-renders performance optimization.

<h3>🧐 What is a necessary and unnecessary re-render?</h3>

**Necessary re-render** - re-render of a component that is the source of the changes, or a component that directly uses the new information. For example, if a user types in an input field, the component that manages its state needs to update itself on every keystroke, i.e. re-render.

**Unnecessary re-render** - re-render of a component that is propagated through the app via different re-renders mechanisms due to either mistake or inefficient app architecture. For example, if a user types in an input field, and the entire page re-renders on every keystroke, the page has been re-rendered unnecessarily.

Unnecessary re-renders by themselves are **not a problem**: React is very fast and usually able to deal with them without users noticing anything.

However, if re-renders happen too often and/or on very heavy components, this could lead to user experience appearing “laggy”, visible delays on every interaction, or even the app becoming completely unresponsive.

---

<h2>When React component re-renders itself?</h2>

There are four reasons why a component would re-render itself: state changes, parent (or children) re-renders, context changes, and hooks changes. There is also a big myth: that re-renders happen when the component’s props change. By itself, it’s not true (see the explanation below).

<h3>🧐 Re-renders reason: state changes</h3>

When a component’s state changes, it will re-render itself. Usually, it happens either in a callback or in `useEffect` hook.

State changes are the “root” source of all re-renders.

[See example in codesandbox](https://codesandbox.io/s/part2-1-re-renders-because-of-state-ngh8uc?file=/src/App.tsx)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mfo0g6gwybwh9agnfp48.png)


<h3>🧐 Re-renders reason: parent re-renders</h3>

A component will re-render itself if its parent re-renders. Or, if we look at this from the opposite direction: when a component re-renders, it also re-renders all its children.

It always goes “down” the tree: the re-render of a child doesn’t trigger the re-render of a parent. (There are a few caveats and edge cases here, see the full guide for more details: [The mystery of React Element, children, parents and re-renders](https://www.developerway.com/posts/react-elements-children-parents)).

[See example in codesandbox](https://codesandbox.io/s/part-2-2-re-renders-because-of-parent-b0xvxt?file=/src/App.tsx)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvcwoeasqdxmxwnildzk.png)

<h3>🧐 Re-renders reason: context changes</h3>

When the value in Context Provider changes, **all** components that use this Context will re-render, even if they don’t use the changed portion of the data directly. Those re-renders can not be prevented with memoization directly, but there are a few workarounds that can simulate it (see [Part 7: preventing re-renders caused by Context](https://www.developerway.com/posts/react-re-renders-guide#part7)).

[See example in codesandbox](https://codesandbox.io/s/part-2-3-re-render-because-of-context-i75lwh?file=/src/App.tsx)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uy10hosi29obwmqgwjx.png)

<h3>🧐 Re-renders reason: hooks changes</h3>

Everything that is happening inside a hook “belongs” to the component that uses it. The same rules regarding Context and State changes apply here:

* state change inside the hook will trigger an **unpreventable** re-rerender of the “host” component
* if the hook uses Context and Context’s value changes, it will trigger an **unpreventable** re-rerender of the “host” component

Hooks can be chained. Every single hook inside the chain still “belongs” to the “host” component, and the same rules apply to any of them.

[See example in codesandbox](https://codesandbox.io/s/part-2-4-re-render-because-of-hooks-5kpdrp?file=/src/App.tsx)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ztpgikqjc5qr4zfn0ct.png)

<h3>⛔️ Re-renders reason: props changes (the big myth)</h3>

It doesn’t matter whether the component’s props change or not when talking about re-renders of not memoized components.

In order for props to change, they need to be updated by the parent component. This means the parent would have to re-render, which will trigger re-render of the child component regardless of its props.

[See example in codesandbox](https://codesandbox.io/s/part-2-5-re-render-props-not-relevant-2b8o0p?file=/src/App.tsx)

Only when memoization techniques are used (`React.memo`, `useMemo`), then props change becomes important.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvck1vltulvkwr5dk21m.png)

---

See the rest of the guide here:

<ul>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part1">Part 1: what is re-render in React?</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part2">Part 2: when React component re-renders itself?</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part3">Part 3: preventing re-renders with composition</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part4">Part 4: preventing re-renders with React.memo</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part5">Part 5: improving re-renders performance with useMemo/useCallback</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part6">Part 6: improving re-renders performance of lists</a>
        </li>
        <li>
          <a href="https://www.developerway.com/posts/react-re-renders-guide#part7">Part 7: preventing re-renders caused by Context</a>
        </li>
      </ul>

---

Originally published at [https://www.developerway.com](https://www.developerway.com). The website has more articles like this 😉

[Subscribe to the newsletter](https://www.developerway.com), [connect on LinkedIn](https://www.linkedin.com/in/adevnadia/) or [follow on Twitter](https://twitter.com/adevnadia) to get notified as soon as the next article comes out.