react: Reasons React would be calling render() when memo returns false

Hey, my comment might not help you but I hope it does a little. I was just battling the same issue.

I have nested routing in my app and I was trying to get my <Header /> component not to refresh when its only prop wasn’t changing, yet it kept re-rendering. My memo() always returned true.

I put a console log at every route/layout wrapper level of my App (I’m a debugging master right 💪) and found out that my wrapping layout component is re-rendering all the time because it has history prop (although I’m not using it at all), simply because the component is a <Route /> in a <Switch /> so the history prop kept changing and my Layout was re-rendered all over - and it contained the poor <Header />.

From my experience, I can say that memo() indeed is working right. However, if your parent components re-render, there’s not much your poor memoized child can do about it.

Have you solved this issue? Debugging every level of my app helped a lot, I saw many unnecessary renders in my wrapping layouts when they didn’t need to change at all, because I wasn’t even going to the different parts of the app that use different wrappers.

Hey! I just debugged my app when it re-rendered React.memoed components, and found out I just made a stupid mistake. So here’s a heads-up if anyone else runs into the same problem.

When I declare a function like this: const Cmp = () => { return <div />; };, then the component will be named “Cmp” (the variable name) in the React DevTools “⚛️ Components” tab. However, when I wrap it in a React.memo call like this: const Cmp = React.memo(() => { return <div />; });, then the component will be named “Anonymous Memo” instead. As a workaround, I started declaring my components like this: const Cmp = React.memo(function Cmp() { return <div />; });, which restored the component name in the DevTools.

However, this will not work for recursive components! In the following component, the whole recursive tree will re-render whenever the root component re-renders:

const TreeItem = React.memo(function TreeItem({nodeId}) {
  const node = useNode(nodeId); // Fetches node from backend
  return (<div>
    {node.name}
    {node.children.map(childId => <TreeItem nodeId={childId} />)}
  </div>);
});

The reason is that inside of the component, the name TreeItem binds to the function name, not to the result of the React.memo call.

@gaearon The tool looks great. It will take some time until I learn to use it efficiently, but I’m definitely giving it a go.

@natew Sorry, I guess I couldn’t form my thoughts into correct sentences lol. English is my second language so sometimes I have troubles expressing the things I want to say correctly.

I want to say that the component I wrapped with memo() didn’t only keep re-rendering, it kept re-mounting. So memo() didn’t work because it was being mounted again and again, therefore memo() was no help. Maybe your component is acting the same way and that’s why memo() doesn’t help. If it mounts, it doesn’t care about memo(), that’s why it refreshes although you always return true as the second argument. Could this be your case?

Hey guys, I read through this thread. I’m having the same issues with React. How exactly are we supposed to garantee a component doesn’t rerender if the below doesn’t even work?

const Component = React.memo(() => <div />, (a, b) => true)

I notice that even with useCallback(() => {}, []) still runs on every time the component re-renders.

Is this all normal? If so what’s the point of passing in [] to useCallback or even using memo?

Ok well this is good news for my sanity then. I thought I was going insane given it’s a simple component and fully returns true for memo. No legacy context and it wasn’t changing I don’t think. I’ll try and extract an example then.