Что делают React Hooks?

React Hooks

Что такое Hooks?

Hooks (хуки) — это функции, появившиеся в React 16.8, которые позволяют **использовать state, lifecycle и другие возможности React внутри функциональных компонентов** без написания классов. До хуков вся логика состояния и побочных эффектов требовала классовых компонентов.

Зачем нужны Hooks?

1. Переиспользование логики — до хуков для переиспользования логики с состоянием использовались HOC и render props, что приводило к «wrapper hell». Хуки позволяют вынести любую логику в кастомный хук и переиспользовать её.
2. Упрощение компонентов — классовые компоненты часто имели разрозненную логику в componentDidMount, componentDidUpdate, componentWillUnmount. Хуки позволяют группировать связанную логику вместе.
3. Отказ от классов — классы сложнее для понимания (this, bind), хуже минифицируются, создают трудности с hot reload.

Базовые хуки

useState — локальное состояние

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  );
}

Возвращает текущее значение и функцию для его обновления. Обновление через функцию (c => c + 1) безопасно при нескольких обновлениях подряд.

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

Заменяет componentDidMount, componentDidUpdate, componentWillUnmount.

useEffect(() => {
  // Выполняется после рендера
  const subscription = subscribe(userId);

  return () => {
    // Cleanup — выполняется перед следующим эффектом или размонтированием
    subscription.unsubscribe();
  };
}, [userId]); // зависимости — эффект запускается только при изменении userId

• Пустой массив [] — эффект один раз при монтировании
• Без массива — эффект при каждом рендере
• С зависимостями — при изменении любой из них

useContext — контекст

const theme = useContext(ThemeContext);

Подписывается на контекст и возвращает его текущее значение без HOC Consumer.

useRef — ссылка на DOM или мутабельное значение

function TextInput() {
  const inputRef = useRef(null);

  const focus = () => inputRef.current.focus();

  return <input ref={inputRef} />;
}

useRef также используется для хранения любого мутабельного значения, которое не вызывает перерендер при изменении (в отличие от useState).

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

Альтернатива useState для состояния со сложной логикой обновлений.

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 Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      {state.count}
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
}

Оптимизационные хуки

• useMemo — кэширует результат вычисления
• useCallback — кэширует ссылку на функцию

Кастомные хуки

Главная сила хуков — возможность создавать свои. Любая функция с именем use*, использующая другие хуки, — кастомный хук.

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(r => r.json())
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, [url]);

  return { data, loading, error };
}

// Использование в любом компоненте:
const { data, loading } = useFetch("/api/users");

Правила хуков

1. Вызывать только на верхнем уровне компонента или кастомного хука — не внутри if, for, вложенных функций
2. Вызывать только в React-функциях — не в обычных JS-функциях

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

Итог

Hooks дают функциональным компонентам доступ к state, lifecycle, контексту и позволяют переиспользовать логику через кастомные хуки. Это упростило React-архитектуру и стало основным способом написания компонентов.