Какие бывают хуки

Хуки позволяют использовать состояние и другие возможности React без написания классов. С их появлением в версии 16.8, разработчики получили доступ к мощному и выразительному инструменту для создания компонентов. Рассмотрим основные примеры, а также некоторые дополнительные, которые предоставляет React.

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

1. useState

  • Позволяет добавлять состояние к функциональным компонентам.
  • Пример:
  const [count, setCount] = useState(0);

2. useEffect

  • Даёт возможность выполнять побочные эффекты в компоненте, такие как обращения к API, подписки или таймеры.
  • Пример:
 useEffect(() => {
       document.title = `Вы нажали ${count} раз`;
     }, [count]); // Зависимость от состояния count

3. useContext

  • Даёт возможность получить текущее значение контекста, что упрощает доступ к данным в глубоко вложенных компонентах без их явной передачи через пропсы.
  • Пример:
const value = useContext(MyContext);

Дополнительные хуки:

1. useReducer

  • Альтернатива `useState` для более сложного управления состоянием, использует концепцию редьюсера для обработки сложных изменений состояния.
  • Пример:
     const [state, dispatch] = useReducer(reducer, initialState);

2. useCallback

  • Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости.
  • Пример:
     const memoizedCallback = useCallback(() => {
       doSomething(a, b);
     }, [a, b]);

3. useMemo

  • Возвращает мемоизированное значение, пересчитывается только при изменении зависимостей.
  • Пример:
     const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4. useRef

  • Возвращает изменяемый ref-объект, который можно использовать для доступа к DOM-элементам или хранения любого мутируемого значения.
  • Пример:
     const myRef = useRef(initialValue);

5. useImperativeHandle

  • Используется для передачи родительским компонентам инстанса значения из дочерних компонентов, обычно для управления фокусом, выделением текста или анимацией.
  • Пример:
     useImperativeHandle(ref, () => ({
       focus: () => {
         myTextInput.current.focus();
       }
     }));

6. useLayoutEffect

  • Похож на `useEffect`, но выполняется синхронно после всех изменений DOM. Используется для чтения макета из DOM и реагирования на эти изменения синхронно.
  • Пример:
     useLayoutEffect(() => {
       // Измерения или взаимодействия с DOM
     }, [dependencies]);

7. useDebugValue

  • Может использоваться для отображения метки для пользовательских хуков в React DevTools.
  • Пример:
     useDebugValue(value);

Основные хуки (`useState`, `useEffect`, `useContext`) позволяют добавлять состояние, работать с побочными эффектами и использовать контекст в функциональных компонентах

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

Feb. 22, 2024, easyoffer

Примеры ответов: