A Visual Guide to React Rendering - Cheat Sheet
Tags: react, javascript, webdev
Published: 2021-10-19 09:05:11

When does react component re-renders? What can cause the re-render, and how to prevent unnecessary renders? Here is a quick cheat sheet you can refer to whenever you find yourself asking these questions.


*This article serves as a table of content for a <a href="/blog/react-render-always-rerenders/">Visual Guide to React Rendering</a> series. Every section of the cheat sheet links to the correspondent chapter of the guide that explores a topic in depth.*

---

## Standard rendering and memo

By default, when the state of the component changes, this component and **all its children** re-render. You can wrap React component with `memo` to prevent an entire subtree from re-rendering.

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

<a href="https://alexsidorenko.com/blog/react-render-always-rerenders/" rel="noopener noreferrer" target="_blank">A Visual Guide To React Rendering - It Always Rerenders (Chapter 1)</a>

---

## Primitive vs Non-primitive props

Non-primitive values in javascript are compared by reference.

```jsx
{display: "flex"} === {display: "flex"} // false
```

Keep that in mind when passing props to memoized components. Memoized components re-render when their props change.

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

<a href="https://alexsidorenko.com/blog/react-render-props/" rel="noopener noreferrer" target="_blank">A Visual Guide To React Rendering - Props (Chapter 2)</a>

---

## Stable reference with useMemo

You can preserve a reference to a non primitive value with `useMemo`. It won't change on re-renders.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/819blf5o4qfxghq0ykpx.gif) 

<a href="https://alexsidorenko.com/blog/react-render-usememo/" rel="noopener noreferrer" target="_blank">A Visual Guide To React Rendering - useMemo (Chapter 3)</a>

---

## Stable reference with useCallback

You can preserve a reference to a function with `useCallback`

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

<a href="https://alexsidorenko.com/blog/react-render-usecallback/" rel="noopener noreferrer" target="_blank">A Visual Guide To React Rendering - useCallback (Chapter 4)</a>

## Rendering and Context

The component right under your context provider should probably use `memo`

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

<a href="https://alexsidorenko.com/blog/react-render-context/" rel="noopener noreferrer" target="_blank">A Visual Guide To React Rendering - Context (Chapter 5)</a>

---

## Rendering and DOM

React component render does not mean DOM update. React is smart enough to update only those parts of DOM that need to change.

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

<a href="https://alexsidorenko.com/blog/react-render-dom/" rel="noopener noreferrer" target="_blank">A Visual Guide To React Rendering - DOM (Chapter 6)</a>

---

Originally published at [alexsidorenko.com](https://alexsidorenko.com/blog/react-render-cheat-sheet/)


---

## Articles on the topic:

- [A (Mostly) Complete Guide to React Rendering Behavior](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/) - Mark Erikson
- [Fix the slow render before you fix the re-render](https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render) - Kent C. Dodds
- [Before You memo()](https://overreacted.io/before-you-memo/) - Dan Abramov