Изменение состояния в React происходит через метод setState для классовых компонентов или с помощью хука useState для функциональных компонентов.

Классовые компоненты:

// Импортируем React
import React, { Component } from 'react';

// Создаем классовый компонент
class MyComponent extends Component {
  // Инициализируем состояние
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // Метод для изменения состояния
  incrementCount = () => {
    // Используем setState
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Счетчик: {this.state.count}</p>
        <button onClick={this.incrementCount}>Увеличить</button>
      </div>
    );
  }
}

// Экспортируем компонент
export default MyComponent;

setState асинхронен.
setState объединяет новое состояние с текущим (shallow merge).
setState может принимать функцию, которая возвращает новое состояние, основанное на предыдущем:

// Метод для изменения состояния с использованием функции
incrementCountFunction = () => {
  this.setState((prevState) => ({
    count: prevState.count + 1
  }));
};

Функциональные компоненты (с использованием useState):

// Импортируем React и useState
import React, { useState } from 'react';

// Создаем функциональный компонент
function MyFunctionComponent() {
  // Инициализируем состояние с помощью useState
  const [count, setCount] = useState(0); // [текущее состояние, функция для обновления]

  // Функция для изменения состояния
  const incrementCount = () => {
    // Используем функцию для обновления состояния
    setCount(count + 1);
  };

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={incrementCount}>Увеличить</button>
    </div>
  );
}

// Экспортируем компонент
export default MyFunctionComponent;

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

// Функция для изменения состояния с использованием функции
const incrementCountFunction = () => {
  setCount(prevCount => prevCount + 1);
};

Важные моменты при изменении состояния:

Не изменяйте состояние напрямую: Никогда не присваивайте новое значение свойству state напрямую (например, this.state.count = 5 или count = 5). React не отследит это изменение и компонент не перерендерится.
Изменение объектов и массивов: При изменении объектов или массивов в состоянии, всегда создавайте их новые копии. React сравнивает ссылки на объекты/массивы, и если ссылка не меняется, React предполагает, что данные не изменились и не вызывает перерисовку.

// Изменение объекта в классовом компоненте
this.setState(prevState => ({
  user: {
    ...prevState.user, // Копируем старые свойства
    name: 'Новое имя' // Обновляем нужное свойство
  }
}));

// Изменение массива в функциональном компоненте
setItems(prevItems => [...prevItems, 'Новый элемент']); // Добавляем новый элемент

Асинхронность setState: Если вам нужно выполнить действие после того, как состояние обновится и компонент перерендерится, используйте второй аргумент setState (функцию-callback) или хук useEffect в функциональных компонентах.

// Callback в setState
this.setState({ count: this.state.count + 1 }, () => {
  console.log('Состояние обновлено!');
});

// useEffect для реакции на изменение состояния
useEffect(() => {
  console.log('Состояние count изменилось:', count);
}, [count]); // Зависимость: хук сработает при изменении count

Сравнение методов:

Характеристика	Классовый компонент (`setState`)	Функциональный компонент (`useState`)
Синтаксис	Метод `this.setState(newState[, callback])`	Хук `const [state, setState] = useState(initialState)`
Объединение/Замена	Объединяет новое состояние с текущим (shallow merge)	Заменяет текущее состояние новым
Асинхронность	Асинхронен	Функция обновления асинхронна при вызове из обработчиков событий, но синхронна при вызове внутри render-фазы React
Зависимость от предыдущего состояния	Передача функции в `setState`: `this.setState(prevState => ({...}))`	Передача функции в функцию обновления: `setState(prev => ({...}))`

Как правильно изменять состояние компонентов в React?