📚 Шпаргалка по useState в React: Управление состоянием в функциональных компонентах

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

1. Импорт useState

Прежде всего, импортируйте его из React:

import React, { useState } from 'react';

2. Объявление переменной состояния

Внутри вашего функционального компонента вызовите useState():

const [stateVariable, setStateVariable] = useState(initialValue);

* stateVariable: Текущее значение состояния. Вы можете назвать её как угодно.
* setStateVariable: Функция для обновления этого состояния. По соглашению, её называют set + имя переменной состояния (например, setCount, setName).
* initialValue: Начальное значение состояния. Оно будет использовано только при первом рендере компонента. Может быть любым типом данных: число, строка, булево, объект, массив, null.

Пример:

const [count, setCount] = useState(0); // Число
const [name, setName] = useState('Alice'); // Строка
const [isActive, setIsActive] = useState(false); // Булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // Объект
const [items, setItems] = useState([]); // Массив

3. Обновление состояния

Для изменения состояния всегда используйте функцию setStateVariable. Никогда не изменяйте stateVariable напрямую!

// Увеличить счетчик
setCount(count + 1);

// Изменить имя
setName('Charlie');

// Переключить булево
setIsActive(!isActive);

// Обновить объект (важно: создавайте новый объект!)
setUser({ ...user, name: 'David' });

// Добавить элемент в массив (важно: создавайте новый массив!)
setItems([...items, 'New Item']);

Важно: Когда вы вызываете функцию обновления состояния (setCount, setName и т.д.), React перерендерит компонент с новым значением.

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

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

setCount(prevCount => prevCount + 1);

Здесь prevCount — это гарантированно предыдущее значение count.

5. Несколько переменных состояния

Вы можете использовать useState несколько раз в одном компоненте для управления разными частями состояния:

function MyComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <p>Текст: {text}</p>
    </div>
  );
}

Когда использовать useState?

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

Ключевые моменты:

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

Используйте эту шпаргалку, чтобы уверенно работать с состоянием в ваших React-приложениях!

👉 @frontend_1