When does React re-render components?

React re-rendering explained and how to optimize React's re-render performance

React is known for providing a fast user experience by only updating the parts of the UI that have changed. When looking into React's render performance, there are a few terms and concepts that can be hard to understand. It wasn't 100% clear to me what a VDOM was or how React decides to re-render components for quite some time. In the first part of this article, I'll explain the most important concepts about rendering in React and how React decides to re-render a given component . In the last section of this article, I'll show you what you can do to optimize the render performance of your Reac

saved by

• Shubham Shah

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
• The Interactive Guide to Rendering in Reactui.dev
• React re-renders guide: everything, all at once | Developer Waydeveloperway.com
• You Might Not Need an Effect – Reactreact.dev
• Implementing React from scratchrob.directory
• Render and Commit – Reactreact.dev
• How to write performant React code: rules, patterns, do's and don'ts | Developer Waydeveloperway.com
• React graph viscrubier.github.io
• Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
• State as a Snapshot – Reactreact.dev
• Grainradgrainrad.com