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>
  );
}

useEffect

Выполняет побочные эффекты в функциональных компонентах. Это аналог методов жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount в классовых компонентах.

useEffect принимает функцию, которая выполняется после рендеринга. Также можно вернуть функцию для очистки, которая вызовется перед следующим выполнением эффекта или при размонтировании.

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

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

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval); // Очистка интервала при размонтировании
  }, []); // Зависимости, пустой массив означает выполнение только при первом рендере

  return <p>Счетчик: {count}</p>;
}

К содержанию ↑

useContext

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

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Кнопка</button>;
}

useRef

Предоставляет способ хранения изменяемого значения, которое сохраняется между рендерингами, или для получения ссылки на DOM-элемент.

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

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

  useEffect(() => {
    inputRef.current.focus();
  }, []);

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

useReducer

Позволяет управлять состоянием более сложным образом. Это аналог Redux-подобного паттерна управления состоянием.

import React, { 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:
      throw new Error();
  }
}

function Counter() {
  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>
  );
}

К содержанию ↑

useMemo и useCallback

Используются для оптимизации производительности за счет мемоизации вычислений или функций.

useMemo мемоизирует значение, чтобы повторно использовать его при тех же входных данных.

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

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

function ExpensiveCalculationComponent({ num }) {
  const expensiveCalculation = useMemo(() => {
    console.log('Выполняется дорогая операция...');
    return num * 2;
  }, [num]);

  return <p>Результат: {expensiveCalculation}</p>;
}