Как связать функцию с хуками в React?

Нет необходимости связывать функции / обратные вызовы в функциональных компонентах, поскольку в функциях нет this. В классах было важно привязать this, потому что мы хотим убедиться, что this в обратных вызовах ссылается на сам экземпляр компонента. Однако выполнение .bind в конструкторе имеет еще одно полезное свойство - создавать функции однажды в течение всего жизненного цикла компонента, и новый обратный вызов создавался не при каждом вызове render(). Чтобы инициализировать обратный вызов только один раз, используя перехватчики React, вы должны использовать useCallback.

Классы

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.info('Click happened');
  }

  render() {
    return <Button onClick = {this.handleClick}>Click Me</Button>;
  }
}

Хуки

function Foo() {
  const memoizedHandleClick = useCallback(
    () => {
      console.info('Click happened');
    },
    [], // Tells React to memoize regardless of arguments.
  );
  return <Button onClick = {memoizedHandleClick}>Click Me</Button>;
}

Вы могли бы также написать компонент Foo, описанный выше, таким образом и сэкономить время на вводе текста. Обратите внимание на синтаксис handleClick ... он определяет закрытие handleClick как поле в Foo, а не как метод. Это избавляет вас от необходимости использовать привязку для перезаписи ссылки на объект handleClick в конструкторе. (Кроме того, вам не нужно определять конструктор, если вы просто вызываете «супер»!)

class Foo extends Component {
  handleClick = () => {
    console.info('Click happened');
  }

  render() {
    return <Button onClick = {this.handleClick}>Click Me</Button>;
  }
}

Точно так же для вашего исходного примера просто объявите state и setCount напрямую и упростите свой код:

class Test extends Component{
  state = {count: 0}

  setCount = () => {
    this.setState({count: this.state.count + 1});
  }

  render() {
    return <button onClick = {this.setCount}>Increase</button>
  }
}

Люди приходят в SO и копируют код. Оставьте этот ответ здесь, чтобы сообщество React не ошибалось в запоминании всего и, возможно, выполняло больше работы, чем необходимо.

Функциональные компоненты

function Foo() {
  const handleClick = function(){
    // use function statements to avoid creating new instances on every render
    // when you use `bind` or arrow functions
    console.info('memoizing can lead to more work!')
  };
  return <Button onClick = {handleClick}>Click Me</Button>;
}

Совет: посмотрите, какой код передается при использовании useCallback, и посмотрите, нужен ли он, прежде чем вставлять его. Если вы не уверены, что он вам нужен, вероятно, нет. и чтобы быть уверенным, что это приносит вам пользу, профилируйте его.