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>
  );
});

class Parent extends React.Component {
  state = {count: 0}

  // always the same function instance
  handleClick = () => {
    const {count} = this.state;
    console.log(`hi #${count}!`);
  }

  render() {
    return (
      <>
        <PureHeavyComponent onClick={this.handleClick} />
        <button onClick={() => this.setState({count: this.state.count + 1})}>increase counter</button>
      </>
    );
  }
};