Какие основные хуки React вы знаете и используете?

• useState: Для управления состоянием компонента.
• useEffect: Для выполнения побочных эффектов (запросы к API, подписки, манипуляции с DOM) в функциональных компонентах, в ответ на изменения.
• useContext: Для доступа к значению контекста из компонента, не передавая пропсы через промежуточные уровни.
• useRef: Для хранения mutable значений, не вызывающих ререндера, или для получения ссылки на DOM-элемент.
• useMemo: Для мемоизации вычислений и предотвращения их повторного выполнения при каждом рендере, если зависимости не изменились.
• useCallback: Для мемоизации функций, чтобы предотвратить их создание при каждом рендере и избежать проблем с производительностью при передаче их в компоненты, использующие React.memo.
• useReducer: Альтернатива useState для управления более сложным состоянием, особенно полезен при множестве связанных обновлений или когда следующее состояние зависит от предыдущего.
• useLayoutEffect: Срабатывает синхронно после всех мутаций DOM и до того, как браузер успеет "нарисовать" изменения. Используется для случаев, когда нужно прочитать расположение элемента DOM после того, как он был отрендерен, и потенциально внести изменения в зависимости от этого.

Я активно использую useState, useEffect, useContext и useRef в своей ежедневной работе. useMemo и useCallback применяю для оптимизации производительности в более сложных компонентах или при работе с большими списками. useReducer предпочитаю для управления комплексным состоянием. useLayoutEffect использую редко, в основном для специфических задач, связанных с измерением и расположением элементов.

Пример использования useState и useEffect:

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

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

  useEffect(() => {
    // Обновляем заголовок страницы при изменении счетчика
    document.title = `Вы нажали ${count} раз`;
  }, [count]); // Зависимость: эффект срабатывает только при изменении count

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажать
      </button>
    </div>
  );
}

Пример использования useContext:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light'); // Создаем контекст

function ThemedButton() {
  const theme = useContext(ThemeContext); // Получаем значение контекста
  return <button className={theme}>Кнопка с темой</button>;
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// В родительском компоненте оборачиваем в провайдер
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}