Как обратиться к State из UseState?

Работа со State в React Hooks

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

Синтаксис useState

useState возвращает массив из двух элементов:

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

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

Основные способы доступа к State

1. Прямой доступ к значению

import { useState } from 'react';

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

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

Переменная count содержит текущее значение state. Вы можете использовать её напрямую в JSX или логике компонента.

2. Использование в обработчиках событий

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Имя:', name);
    console.log('Email:', email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Введите имя"
      />
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Введите email"
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

3. Доступ в эффектах (useEffect)

import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    // Здесь можно обращаться к state 'id'
    fetch(`/api/data/${id}`)
      .then(res => res.json())
      .then(result => setData(result));
  }, [id]); // Зависимость от id

  return (
    <div>
      <p>Данные: {JSON.stringify(data)}</p>
      <button onClick={() => setId(id + 1)}>
        Загрузить следующие данные
      </button>
    </div>
  );
}

Ключевые правила

• Immutability — никогда не изменяйте state напрямую. Всегда передавайте новое значение в setState.
• Асинхронность — setState работает асинхронно, поэтому новое значение state не доступно сразу после вызова.
• Батчинг — в React 18+ несколько setState вызовов в одном обработчике объединяются в один re-render.

Неправильный способ

// ❌ НЕПРАВИЛЬНО
count = 5; // Прямое изменение переменной

// ❌ НЕПРАВИЛЬНО
const [items, setItems] = useState([]);
items.push('новый элемент'); // Мутирование массива

Правильный способ

// ✅ ПРАВИЛЬНО
setCount(5);

// ✅ ПРАВИЛЬНО
const [items, setItems] = useState([]);
setItems([...items, 'новый элемент']);

Понимание работы useState критически важно для разработки React-приложений. State — это основной инструмент для управления динамическими данными и пользовательского взаимодействия.