Why React Re-Renders
In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when and why React re-renders, and how we can use this information to optimize the performance of our React apps.
Introduction So, I'll be honest. I had been working professionally with React for years without really understanding how React's re-rendering process worked. 😅 I think this is true for lots of React developers. We understand enough to get by, but if you ask a group of React developers a question like “What triggers a re-render in React?” , you'll likely get a handful of different hand-wavy answers. There are a lot of misconceptions out there about this topic, and it can lead to a lot of uncertainty. If we don't understand React's render cycle, how can we understand how to use React.memo , or
Explore this link on the map →saved by
related reading
- When does React re-render components? | Felix Gerschaufelixgerschau.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
- Understanding useMemo and useCallback • Josh W. Comeaujoshwcomeau.com
- How to write performant React code: rules, patterns, do's and don'ts | Developer Waydeveloperway.com
- What is Memoization? How and When to Memoize in JavaScript and Reactfreecodecamp.org
- Implementing React from scratchrob.directory
- Pure components in React: Using PureComponent and React.memo - LogRocket Blogblog.logrocket.com
- React graph viscrubier.github.io
- Render and Commit – Reactreact.dev