Как использовать useState?react-19

useState — это хук (hook) состояния, который позволяет добавлять локальное состояние в функциональные компоненты React. Это один из самых часто используемых хуков, заменяющий this.state и this.setState в классовых компонентах.

Базовый синтаксис

import { useState } from 'react';

const [state, setState] = useState(initialState);

Где:

• state — текущее значение состояния
• setState — функция для обновления состояния
• initialState — начальное значение состояния

Простой пример

import { useState } from 'react';

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

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликнуть
      </button>
    </div>
  );
}

Особенности работы

1. Ленивая инициализация (Lazy Initialization) Для сложных вычислений начального состояния можно передать функцию:

   const [state, setState] = useState(() => {
     const initialState = someExpensiveComputation(props);
     return initialState;
   });
   

2. Функциональное обновление (Functional Updates) Когда новое состояние зависит от предыдущего:

   setCount(prevCount => prevCount + 1);
   

3. Объекты в состоянии (Objects in State)

   const [user, setUser] = useState({ name: '', age: 0 });
   
   // Правильное обновление объекта
   setUser(prevUser => ({ ...prevUser, age: 25 }));
   

Практические примеры использования

Форма ввода

function InputForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

Переключатель

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'Включено' : 'Выключено'}
    </button>
  );
}

Важные нюансы

1. Асинхронность обновлений — состояние не изменяется мгновенно
2. Правило множественных вызовов — можно использовать несколько useState в одном компоненте

   const [name, setName] = useState('');
   const [age, setAge] = useState(0);
   const [isAdmin, setIsAdmin] = useState(false);
   

3. Не изменяйте состояние напрямую — всегда используйте функцию обновления

   // Плохо:
   user.name = 'New Name';
   setUser(user);
   
   // Хорошо:
   setUser({ ...user, name: 'New Name' });
   

Сравнение с классовыми компонентами

Классовый компонент	Функциональный компонент с useState
this.state = { count: 0 };	const [count, setCount] = useState(0);

Резюмируем