A Visual Guide to React Rendering - Cheat Sheet

When does react component re-render? 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 contents for a Visual Guide to React Rendering 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.

A Visual Guide To React Rendering - It Always Rerenders (Chapter 1)

Primitive vs Non-primitive props

Non-primitive values in javascript are compared by reference.

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

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

A Visual Guide To React Rendering - Props (Chapter 2)

Stable reference with useMemo

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

A Visual Guide To React Rendering - useMemo (Chapter 3)

Stable reference with useCallback

You can preserve a reference to a function with useCallback

A Visual Guide To React Rendering - useCallback (Chapter 4)

Rendering and Context

The component right under your context provider should probably use memo

A Visual Guide To React Rendering - Context (Chapter 5)

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.

A Visual Guide To React Rendering - DOM (Chapter 6)

Articles on the topic:

• A (Mostly) Complete Guide to React Rendering Behavior - Mark Erikson
• Fix the slow render before you fix the re-render - Kent C. Dodds
• Before You memo() - Dan Abramov