with-class.jsx

export class UserList extends React.Component {
  state = { count: 0 };

  handleClick = (item) => {
    setTimeout(() => {
      console.log(`You clicked ${this.props.group} ${this.state.count} times`);
    }, 3000);
  };

  render() {
    return (
      <div
        onClick={() => {
          this.setState({ count: this.state.count + 1 });
        }}
      >
        <HugeListOfItems
          group={this.props.group}
          handleClick={this.handleClick}
        />
      </div>
    );
  }
}

with-hooks.jsx

export function UserList({ group }) {
  const [count, setCount] = React.useState(0);
  // Have to remember to useCallback here to avoid
  // the function getting recreated.
  const handleClick = React.useCallback(
    (item) => {
      setTimeout(() => {
        console.log(`You clicked ${group} ${count} times`);
      }, 3000);

      // Have to pass all of the variable references here so
      // React knows when to update the callback function.
    },
    [group, count]
  );

  return (
    <div onClick={() => setCount(count + 1)}>
      <HugeListOfItems group={group} handleClick={handleClick} />
    </div>
  );
}