What are the main benefits of using React's useState hook?

useState — это React-хук, который позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущего значения состояния и функции для его обновления. При вызове функции обновления компонент перерендеривается с новым значением.

Пример:

import { useState } from 'react';

function Counter() {
  // 'count' - текущее состояние, 'setCount' - функция для его обновления
  const [count, setCount] = useState(0);

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

Ключевые особенности:

• Добавляет состояние: Позволяет использовать состояние в компонентах, ранее доступное только в классовых.
• Функция обновления: Возвращает специальную функцию для изменения состояния.
• Перерендер: Изменение состояния через функцию обновления вызывает перерендер компонента.
• Примитивы и объекты: Может хранить любые типы данных: числа, строки, булевы значения, объекты, массивы.
• Ленивая инициализация: Начальное значение может быть функцией, которая выполняется только при первом рендере, что полезно для дорогих вычислений.

const [data, setData] = useState(() => {
  // Дорогие вычисления выполняются только один раз
  const initialData = someExpensiveCalculation();
  return initialData;
});