React memo creates rerender

Question

I'm having an issue with react memo when using nextjs. In the _app e.g. I have a button imported:

import { ChildComponent } from './ChildComponent';

export const Button = ({ classN }: { classN?: string }) => {
  const [counter, setCounter] = useState(1);
  
  const Parent = () => { return (
     <button onClick={() => setCounter(counter + 1)}>Click me</button>
  )}
  
  return (
    <div>
      {counter}
      <Parent />
      <ChildComponent />
    </div>
  );
};

Child component:

import React from 'react';

export const ChildComponent = React.memo(
  () => {
    React.useEffect(() => {
      console.log('rerender child component');
    }, []);

    return <p>Prevent rerender</p>;
  },
  () => false
);

I made one working in React couldn't figure it out in my own app: https://codesandbox.io/s/objective-goldwasser-83vb4?file=/src/ChildComponent.js

Answer 1

The second argument of React.memo() must be a function that returns true if the component don't need to be rerendered and false otherwise - or in the original definition, if the old props and the new props are equal or not.

So, in your code, the solution should be just change the second argument to:

export const ChildComponent = React.memo(
  () => { ... },
  // this
  () => true
);

Which is gonna tell React that "the props didn't change and thus don't need to rerender this component".