useState в React: управление состоянием компонента

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

Как работает useState?

• Инициализация состояния. Хук useState принимает начальное значение и возвращает массив с двумя элементами:

  1. Текущее значение состояния.
  2. Функцию для обновления состояния.

• Обновление состояния. Когда состояние изменяется, компонент перерисовывается с новым значением состояния.

Пример использования useState

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // Инициализация состояния с начальным значением 0

  const increment = () => {
    setCount(count + 1); // Обновление состояния
  };

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

Важные моменты при использовании useState

• Функция обновления состояния может быть вызвана с новым значением состояния или функцией, которая принимает предыдущее состояние:

  setCount(prevCount => prevCount + 1);

• Если вы хотите обновить состояние на основе его предыдущего значения, используйте функцию, переданную в setCount, чтобы избежать проблем с асинхронностью обновлений.

Пример с функцией для обновления

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1); // Используем предыдущее состояние
  };

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

Как работает useState(() => compute())?

Когда вы передаете функцию в useState, эта функция будет выполнена только один раз — при первом рендере компонента. Это может быть полезно для оптимизации производительности, если вычисления тяжелые или если нужно сделать что-то перед установкой начального состояния.

Вместо того чтобы вычислять значение каждый раз при рендере, React вызовет эту функцию только один раз и использует результат в качестве начального состояния.

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

import { useState } from "react";

// Функция для сложных вычислений
function compute() {
  console.log("Вычисления выполняются...");
  return 42; // Например, вычисление сложной логики
}

function MyComponent() {
  const [count, setCount] = useState(() => compute()); // compute вызывается только один раз

  return (
    <div>
      <p>Значение: {count}</p>
    </div>
  );
}

Связанные статьи

• react-hooks-2
• react-hooks-5
• react-hooks-6