Почему состояние в компоненте нельзя менять напрямую в Реакте?

Состояние компонента является простым объектом Javascript, поэтому у многих программистов, только начавших изучать Реакт, возникает желание менять его также, как и у объекта в Javascript — просто задать новые значения свойств:

this.state.isEnabled = false;

Однако такой способ не является правильным, так как при этом не отслеживается, что состояние было изменено, и нужно выполнить перерисовку компонента.

Метод setState для обновления состояния

Для изменения состояния в компоненте нужно использовать метод setState(). Он позволяет запланировать обновление состояния. После выполнения метода происходит перерисовка компонента.

Метод принимает на вход первым параметром новое состояние компонента в виде объекта либо функцию, возвращающую этот объект. При этом достаточно указать в методе только изменившуюся часть состояния, а не все состояние компонента целиком. Остальные данные будут взяты из прежнего состояния.

Пример использования setState():

this.setState({
    isEnabled: false
});

Вторым параметром можно задать callback-функцию, которая будет выполнена после завершения установки нового состояния и перерисовки компонента, однако вместо callback-функции рекомендуется использовать метод жизненного цикла компонента componentDidUpdate.

Пример использования setState() со 2 параметром:

this.setState({
    isEnabled: false
}, () => {
    console.log('Элемент больше не доступен');
});

Важно понимать, что setState() не гарантирует мгновенного изменения состояния, несколько вызовов могут быть объединены для улучшения производительности. Поэтому в качестве первого параметра следует использовать функцию, если новое состояние зависит от старого или от пропов. В противном случае данные в состоянии могут оказаться не теми, какие ожидались.