Расскажи про основные хуки в React

Основные хуки в React

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

Базовые хуки

1. useState

useState позволяет добавлять состояние в функциональные компоненты. Он возвращает массив из двух элементов: текущее значение состояния и функцию для его обновления.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Инициализация состояния

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

• Особенности:
  • Обновление состояния асинхронное и может быть объединено (batching).
  • Функция обновления (setCount) может принимать предыдущее состояние для избежания замыканий.

2. useEffect

useEffect выполняет побочные эффекты в функциональных компонентах (запросы к API, подписки, ручное изменение DOM). Он заменяет методы жизненного цикла классов.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Пустой массив зависимостей = выполнить один раз при монтировании

  return <div>{data ? data.message : 'Загрузка...'}</div>;
}

• Варианты использования:
  • Без зависимостей: выполняется при каждом рендере.
  • С пустым массивом []: выполняется один раз (аналог componentDidMount).
  • С зависимостями [dep1, dep2]: выполняется при изменении указанных переменных.

3. useContext

useContext предоставляет доступ к контексту, позволяя передавать данные через дерево компонентов без пропсов.

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext); // Получаем значение контекста

  return <button className={theme}>Кнопка с темой {theme}</button>;
}

Дополнительные хуки (важные для продвинутого использования)

4. useReducer

useReducer — альтернатива useState для управления сложным состоянием. Принимает редюсер (как в Redux) и начальное состояние.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Увеличить
      </button>
    </>
  );
}

5. useMemo и useCallback

• useMemo мемоизирует вычисляемое значение, предотвращая повторные вычисления.
• useCallback мемоизирует функцию, что полезно для оптимизации дочерних компонентов.

import React, { useMemo, useCallback, useState } from 'react';

function ExpensiveComponent({ compute, value }) {
  const result = useMemo(() => compute(value), [compute, value]); // Вычисляется только при изменении зависимостей

  const memoizedCallback = useCallback(() => {
    console.log(value);
  }, [value]); // Функция не пересоздаётся при каждом рендере

  return <div>{result}</div>;
}

Практические рекомендации

• Правила хуков:
  • Используйте хуки только на верхнем уровне (не в циклах, условиях или вложенных функциях).
  • Вызывайте хуки только из React-функций (компонентов или кастомных хуков).
• Кастомные хуки: Позволяют создавать повторно используемую логику с состоянием. Например, хук для управления формой:

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

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value,
    onChange: handleChange,
  };
}

function MyForm() {
  const name = useFormInput('');

  return <input {...name} />;
}

Заключение

Хуки кардинально изменили экосистему React, сделав код более компактным, читаемым и тестируемым. Они устранили сложности классов (например, привязку this) и позволили лучше переиспользовать логику. Понимание основных хуков (useState, useEffect, useContext) и дополнительных (useReducer, useMemo, useCallback) — ключ к эффективной разработке на современном React. Для глубокого погружения рекомендую изучить официальную документацию и практиковаться в создании кастомных хуков.