React re-renders guide: everything, all at once
React re-renders "cheatsheet". Short descriptions with visual aid and code examples of: what re-renders are, what triggers them, most important re-renders related patterns and antipatterns to remember.
Table of contents What is re-render in React? 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 update
Explore this link on the map →related reading
- Why React Re-Renders • Josh W. Comeaujoshwcomeau.com
- Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blogblog.isquaredsoftware.com
- When does React re-render components? | Felix Gerschaufelixgerschau.com
- You Might Not Need an Effect – Reactreact.dev
- The Interactive Guide to Rendering in Reactui.dev
- How to write performant React code: rules, patterns, do's and don'ts | Developer Waydeveloperway.com
- Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
- Mediumtoyesebalogun95.medium.com
- What is Memoization? How and When to Memoize in JavaScript and Reactfreecodecamp.org
- Implementing React from scratchrob.directory
- React graph viscrubier.github.io
- useMemo – Reactreact.dev