Зачем нужен state в React?

# Зачем нужен state в React?

State (состояние) — это один из ключевых концептов React. Это объект, который содержит данные, изменяемые во время жизни компонента. Понимание state — необходимо для создания интерактивных приложений.

Основное определение

State — это локальные данные компонента, которые контролируют его поведение и внешний вид. Когда state изменяется, React автоматически перерендеривает компонент, отражая эти изменения в интерфейсе.

Зачем нужен state?

1. Управление динамическими данными

State позволяет компонентам хранить и управлять данными, которые меняются со временем:

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Без state каждое нажатие кнопки не повлияло бы на интерфейс.

2. Реактивность пользовательского интерфейса

State создаёт связь между данными и представлением. Когда данные меняются, UI автоматически обновляется:

function Form() {
  const [email, setEmail] = useState();
  
  return (
    <input 
      value={email} 
      onChange={(e) => setEmail(e.target.value)}
      placeholder="Enter email"
    />
  );
}

3. Обработка пользовательского взаимодействия

State позволяет отслеживать события и изменять UI в ответ:

function Modal() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      {isOpen && (
        <div className="modal">
          <button onClick={() => setIsOpen(false)}>Close</button>
        </div>
      )}
    </>
  );
}

4. Асинхронные операции

State используется для управления состояниями загрузки и ошибок:

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    fetch(/api/data)
      .then(res => res.json())
      .then(data => setData(data))
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, []);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <div>{JSON.stringify(data)}</div>;
}

Props vs State

Отличие state от props:

Props (Properties)

• Передаются родительским компонентом
• Readonly (неизменяемые)
• Одинаковы для всех экземпляров компонента
• Используются для конфигурации компонента

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

State

• Управляются самим компонентом
• Изменяемые
• Локальны для каждого экземпляра
• Используются для данных, которые меняются

Типы state в React

1. useState Hook (функциональные компоненты)

const [value, setValue] = useState(initialValue);

Возвращает массив с текущим значением и функцией для его изменения.

2. useReducer Hook (сложная логика)

Для более сложных случаев, когда несколько переменных state зависят друг от друга:

const [state, dispatch] = useReducer(reducer, initialState);

function reducer(state, action) {
  switch(action.type) {
    case INCREMENT:
      return { count: state.count + 1 };
    case DECREMENT:
      return { count: state.count - 1 };
    default:
      return state;
  }
}

3. Global State (Context API, Redux, Zustand)

Для state, который нужен в разных частях приложения:

const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = useState(light);
  
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Component />
    </ThemeContext.Provider>
  );
}

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

1. Не изменяй state напрямую

// ❌ Неправильно
state.count = 5;

// ✅ Правильно
setState(5);

2. State обновления асинхронные

React может батчить несколько обновлений state для оптимизации:

function handleClick() {
  setCount(count + 1);
  setCount(count + 1); // Оба вызова объединяются в один
  // count увеличится только на 1, а не на 2
}

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

// ✅ Правильно
setCount(prev => prev + 1);

4. State для примитивов, а не объектов

// ❌ Можно, но не оптимально
const [user, setUser] = useState({ name: , email:  });

// ✅ Лучше
const [name, setName] = useState();
const [email, setEmail] = useState();

Когда NOT использовать state

• Для значений, которые не меняются — используй обычные переменные
• Для значений, вычисляемых из props — используй вычисления или useMemo
• Для данных от одного рендера к другому, не используемых в UI — используй useRef

Заключение

State — это сердце интерактивного React приложения. Без state компоненты были бы статичными и неспособными отвечать на пользовательское взаимодействие. Понимание того, когда и как использовать state, — критично для написания эффективного React кода.