Какие бывают хуки ?
Спросят с вероятностью 17%

Хуки позволяют использовать состояние и другие возможности 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) позволяют добавлять состояние, работать с побочными эффектами и использовать контекст в функциональных компонентах

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

👉 Можно посмотреть Примеры как отвечают люди на этот вопрос или перейти к Списку вопросов на Frontend Developer. Ставь 👍 если нравится контент

🧩 Идущий | 🔐 Собесы | 🔐 Тестовые