Для чего нужен хук?

Назначение хуков

Хуки — это функции, которые позволяют вам использовать состояние и другие возможности React в функциональных компонентах. До введения хуков в React 16.8, только классовые компоненты имели доступ к состоянию и жизненным циклам.

Основные причины использования хуков

1. Упрощение компонентов — функциональные компоненты с хуками требуют меньше кода, чем классовые компоненты
2. Переиспользование логики — хуки позволяют легко делиться кодом между компонентами
3. Разделение проблем — логика, связанная с одной функциональностью, находится в одном месте
4. Улучшение читаемости — код более линейный и понятный

Встроенные хуки React

useState — управление состоянием

import { useState } from "react";

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

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

Хук useState позволяет функциональному компоненту иметь состояние. Он возвращает массив с текущим значением и функцией для его обновления.

useEffect — побочные эффекты

import { useEffect, useState } from "react";

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

  useEffect(() => {
    // Выполняется после рендера
    fetch("/api/data")
      .then(res => res.json())
      .then(data => setData(data));
  }, []); // Зависимости: [] значит выполнится только один раз

  return <div>{data ? JSON.stringify(data) : "Загрузка..."}</div>;
}

useEffect выполняет побочные эффекты (сетевые запросы, подписки, изменение DOM) после рендера компонента.

useContext — доступ к контексту

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={`button-${theme}`}>Нажми</button>;
}

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

import { useReducer } from "react";

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

function ComplexCounter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Счёт: {state.count}</p>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
}

Пользовательские хуки

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

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

  return {
    value,
    setValue,
    bind: {
      value,
      onChange: e => setValue(e.target.value)
    },
    reset: () => setValue(initialValue)
  };
}

function LoginForm() {
  const email = useFormInput("");
  const password = useFormInput("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(email.value, password.value);
    email.reset();
    password.reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" {...email.bind} />
      <input type="password" {...password.bind} />
      <button type="submit">Войти</button>
    </form>
  );
}

Правила использования хуков

1. Вызывайте хуки только на верхнем уровне — не внутри условий, циклов или вложенных функций
2. Вызывайте только в React-функциях — в компонентах или кастомных хуках
3. Зависимости — всегда передавайте массив зависимостей в useEffect, useCallback, useMemo

Почему хуки изменили React

Хуки позволили функциональным компонентам быть полноценной альтернативой классовым. Они упрощают код, улучшают тестируемость и способствуют лучшей организации кода. С введением хуков классовые компоненты стали использоваться реже, хотя они остаются валидным подходом.