Advanced React- useCallback() Invalidates Too Often in Practice #14099

index.jsx

const PureHeavyComponent = React.memo(({onClick}) => {
  console.log('pure heavy component!');
  return (
    <div onClick={onClick}>
     //Many Other React elements are created here
    </div>
  );
});

const Parent = () => {
  console.log('parent!');
  // returns a new handleClick function on every render of Parent
  const handleClick = React.useCallback(() => console.log('hi!'), []);
  return (
    <PureHeavyComponent onClick={handleClick} />
  );
};

// results:

// first render:
<Parent/>
// parent!
// pure heavy component!

// next renders:
<Parent/>
// parent!