---
title: How to Debug React Rerenders
description: Why is my react component rerendering? Learn how to easily debug react rerenders.
image: https://michaelwashburnjr.com/hubfs/pexels-antonio-batinic%CC%81-4164418.jpg
---

# How to Debug React Rerenders

Written by  [Michael Washburn Jr

](https://michaelwashburnjr.com/blog/author/michael-washburn-jr)

![Picture of Michael Washburn Jr](https://michaelwashburnjr.com/hubfs/AuthorAvatar.jpg)

 Published on: May 11, 2021

![](https://michaelwashburnjr.com/hubfs/pexels-antonio-batinic%CC%81-4164418.jpg)

[Share this blog post on Twitter ](https://twitter.com/intent/tweet?text=I+found+this+interesting+blog+post&url=https://michaelwashburnjr.com/blog/how-to-debug-react-rerenders) [Share this blog post on Facebook ](http://www.facebook.com/share.php?u=https://michaelwashburnjr.com/blog/how-to-debug-react-rerenders) [Share this blog post on LinkedIn ](http://www.linkedin.com/shareArticle?mini=true&url=https://michaelwashburnjr.com/blog/how-to-debug-react-rerenders)

Are you having trouble trying to debug react rerenders? Debugging unwanted react rerenders can be one of the most frustrating and tricky problems when building Reacts apps. Especially when working with large systems, trying to identify which prop or hook changes are triggering a re-render can be enough to drive anybody mad. 

## Why does React Rerender?

When working in React, there are a few scenarios in which a component will re-render. If you're not familiar with React yet, or you're just a beginner, consider checking out my tutorial on [building a web app with React](https://michaelwashburnjr.com/2017/08/15/building-webapp-tutorial-p1). For the sake of this article, I'm going to limit my discussion to simple functional components which use hooks.

React components re-render so that they can show the most up-to-date content on the screen when something changes. What will make an individual component re-render is when there's a change to the component's props, component state, or the parent has re-rendered. Sometimes, in order to avoid extraneous rerenders, we'll wrap out React component in React.memo which will memoize the function and only re-compute it if the props have changed. 

If you're not careful, you can easily find yourself in a scenario where too many props and hooks are changing that it becomes infuriating to try and track down all the possible scenarios causing your component to re-render. Now, we really should strive to live in a world where your entire component tree *can* rerender fast enough that it doesn't matter if there are a few somewhat unnecessary calls being added here and there. However, sometimes we have such bulky components that it's not practical to try and render them constantly. 

## How can I Debug React Rerenders?

[React devtools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) can be a great tool for you to use to gauge the performance of your app. It can be used to record sequences of events and show you how many renders occurred, allow you to step through each render, and it can even tell you the reason for the re-render (props changed, hooks changed, etc.). However, what it can't do is give you full insight into what the props were at each render cycle, which can be invaluable insight when you're trying to debug a complicated set of renders.

In order to do this, I use a custom hook like the one below which allows me to call it with my props, and will log the differences between my old and new props with each render.

```
function logPropDifferences(newProps, lastProps) {
  const allKeys = new Set(Object.keys(newProps)).add(Object.keys(lastProps));
  allKeys.forEach(key => {
    const newValue = newProps[key];
    const lastValue = lastProps[key];
    if (newValue !== lastValue) {
      console.log('New Value: ', newValue);      console.log('Last Value: ', lastValue);
    }
  });
}
function useDebugPropChanges(newProps) {
  const lastProps = useRef();
  // Should only run when the component re-mounts
  useEffect(() => {
    console.log('Mounted');
  }, []);
  if (lastProps.current) {
    logPropDifferences(newProps, lastProps.current);
  }
  lastProps.current = newProps;
}
```

This is an extremely useful debugging tool as it allows me to see exactly what is happening with my component at each render cycle. 

In order to use this hook, I would simply call it on the first line of any react component or custom hook, taking care to pass in all of the props that the component or hook accepts so I can see the full picture. Using this hook, I can carefully analyze each step and can easily find which prop changes seem to be suspicious and unnecessary! 

Tip: Look for object props that are logging as changes but identical. Typically, people forget that returning variables inside an object is actually creating a new object every time which will fail an equality test against previous props.

Similarly, a common source of re-renders is using () => {} will create a new function every time, so unless the component is a leaf node or has a fast rendering cycle, you may want to consider switching to [useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) instead.

That's it! Now you should have everything you need to figure out what is causing the source of those pesky rerenders. If there are tricks that you use that I didn't cover here, please leave a comment below!

Tags: [React](https://michaelwashburnjr.com/blog/tag/react) [JavaScript](https://michaelwashburnjr.com/blog/tag/javascript)

## Related Posts

[![building construction site with crane](https://michaelwashburnjr.com/hs-fs/hubfs/Imported_Blog_Media/construction.jpeg?height=200&name=construction.jpeg) 

](https://michaelwashburnjr.com/blog/building-webapp-tutorial-p1)

[Python](https://michaelwashburnjr.com/blog/tag/python), [Django](https://michaelwashburnjr.com/blog/tag/django), [Tutorials](https://michaelwashburnjr.com/blog/tag/tutorials), [React](https://michaelwashburnjr.com/blog/tag/react), [JavaScript](https://michaelwashburnjr.com/blog/tag/javascript)

 Aug 15, 2017 10:49:23 AM

### [Building a Web App with React and Django: Getting Started — Part 1](https://michaelwashburnjr.com/blog/building-webapp-tutorial-p1)

So you want to build a web app. Well, what’s stopping you? If you’re reading this, you’ve probably already been programming for some time, but you’re just missing some of the steps. I’ve been there before. I know how frustrating it can be to know 

[Read More](https://michaelwashburnjr.com/blog/building-webapp-tutorial-p1)

[![Refactoring JQuery to React](https://michaelwashburnjr.com/hs-fs/hubfs/Imported_Blog_Media/refactoring-to-react.jpg?height=200&name=refactoring-to-react.jpg) 

](https://michaelwashburnjr.com/blog/refactoring-jquery-react)

[Tutorials](https://michaelwashburnjr.com/blog/tag/tutorials), [React](https://michaelwashburnjr.com/blog/tag/react), [JavaScript](https://michaelwashburnjr.com/blog/tag/javascript)

 Jan 30, 2018 3:00:58 AM

### [Refactoring JQuery to React](https://michaelwashburnjr.com/blog/refactoring-jquery-react)

JQuery is quickly becoming a thing of the past, and in it’s place stands React. I mean, [even John Resig, author of JQuery, uses React now](https://twitter.com/jeresig/status/726058698989277185). So how can you refactor your website to 

[Read More](https://michaelwashburnjr.com/blog/refactoring-jquery-react)