Что такое state компонента?

Что такое state компонента?

State (состояние) — это данные, которые хранятся внутри компонента и могут изменяться во время его жизненного цикла. Когда state меняется, компонент автоматически перерендеривается с новыми значениями.

State в функциональных компонентах с useState

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

import { useState } from 'react';

function Counter() {
  // state переменная counter, функция для её изменения
  const [counter, setCounter] = useState(0);
  
  return (
    <div>
      <p>Счётчик: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>
        Увеличить
      </button>
    </div>
  );
}

Основные концепции

1. Инициальное значение

// 0 — начальное значение state
const [count, setCount] = useState(0);

// Может быть объект
const [user, setUser] = useState({ name: 'John', age: 30 });

// Может быть функция (для сложных вычислений)
const [data, setData] = useState(() => {
  const initialData = expensiveComputation();
  return initialData;
});

2. Обновление state

// Прямое обновление
setCount(5);

// Функциональное обновление (если новое значение зависит от старого)
setCount(prevCount => prevCount + 1);

// Обновление объекта
setUser(prevUser => ({
  ...prevUser,
  age: prevUser.age + 1
}));

3. Почему нужно использовать функцию setState?

State обновляется асинхронно и может быть батчирован:

// Плохо: неправильный результат
const [count, setCount] = useState(0);

const increment = () => {
  setCount(count + 1);  // count всё ещё 0
  setCount(count + 1);  // count всё ещё 0
  // Результат: count = 1, а не 2
};

// Хорошо: правильный результат
const increment = () => {
  setCount(prevCount => prevCount + 1);  // prevCount = 0
  setCount(prevCount => prevCount + 1);  // prevCount = 1
  // Результат: count = 2
};

Multiple State Variables

function Form() {
  // Можно использовать несколько useState
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  
  const handleSubmit = () => {
    if (name && email) {
      setIsSubmitted(true);
    }
  };
  
  return (
    <div>
      <input 
        value={name} 
        onChange={e => setName(e.target.value)}
        placeholder="Имя"
      />
      <input 
        value={email} 
        onChange={e => setEmail(e.target.value)}
        placeholder="Email"
      />
      <button onClick={handleSubmit}>Отправить</button>
      {isSubmitted && <p>Спасибо!</p>}
    </div>
  );
}

State vs Props

Lifting State Up

Когда несколько компонентов должны делиться state, нужно поднять его в общий родитель:

// Родитель
function Parent() {
  const [count, setCount] = useState(0);
  
  return (
    <>
      <Child1 count={count} onIncrement={() => setCount(count + 1)} />
      <Child2 count={count} />
    </>
  );
}

// Дочерний компонент 1
function Child1({ count, onIncrement }) {
  return <button onClick={onIncrement}>Счёт: {count}</button>;
}

// Дочерний компонент 2
function Child2({ count }) {
  return <p>Текущее значение: {count}</p>;
}

Сложное состояние с useReducer

Для более сложной логики используй useReducer:

import { useReducer } from 'react';

function Counter() {
  const [state, dispatch] = useReducer((state, action) => {
    switch(action.type) {
      case 'INCREMENT':
        return { count: state.count + 1 };
      case 'DECREMENT':
        return { count: state.count - 1 };
      case 'RESET':
        return { count: 0 };
      default:
        return state;
    }
  }, { count: 0 });
  
  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      <button onClick={() => dispatch({ type: 'RESET' })}>Reset</button>
    </>
  );
}

Best Practices

✅ Правила работы со state:

1. Не изменяй state напрямую — используй setState функцию
2. Не создавай новое значение state в функции рендера
3. Используй функциональное обновление (prevState => ...) для зависимостей от старого значения
4. Группируй связанные данные в один state объект
5. Используй useReducer для сложной логики

State — это сердце интерактивности в React. Правильное управление состоянием определяет качество и производительность приложения.