Frontend | Вопросы собесов

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

Спросят с вероятностью 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. Ставь 👍 если нравится контент



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