A guide to when React re-renders

Guide to when and why a react app will re-render

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 when we should wrap our functions in useCallback??

In this tutorial, we’re going to build a mental model for when and why React re-renders. We’ll also learn how to tell why a specific component re-rendered, using the React devtools.