DEV Community

Alex Sidorenko
Alex Sidorenko

Posted on • Updated on • Originally published at alexsidorenko.com

A Visual Guide to React Rendering - Cheat Sheet

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 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.

Image description

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
Enter fullscreen mode Exit fullscreen mode

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

Image description

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.

Image description

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


Stable reference with useCallback

You can preserve a reference to a function with useCallback

Image description

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

Rendering and Context

The component right under your context provider should probably use memo

Image description

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.

Image description

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


Originally published at alexsidorenko.com


Articles on the topic:

Discussion (5)

Collapse
juanpumpkinpie profile image
juanpumpkinpie

I do the same using Redux and Redux thunk to renders API, but Iwould like to know if you can do a real simple sample using like that way but taking in memo the response to display the same information changing just condition of the request. I means, avoiding another request and making it to the memo hook already stored in redux.

Collapse
codefinity profile image
Manav Misra
Collapse
sidkh profile image
Alex Sidorenko Author

Thanks a lot for mentioning this ❤️

Collapse
olsard profile image
olsard

Great article and examples! Thanks for sharing.

Collapse
juanpumpkinpie profile image
juanpumpkinpie

i like it, I left you a comment on Linkedin! ^^