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

Что такое хук ?

Спросят с вероятностью 10%



Хуки — это функции, которые позволяют "подключаться" к состоянию и жизненному циклу компонентов React из функциональных компонентов. Введение их предоставило мощный инструментарий для работы со состоянием, эффектами и другими возможностями React без необходимости преобразования функциональных компонентов в классы.



- useState: Позволяет функциональным компонентам иметь состояние.

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

  

- useEffect: Позволяет выполнять побочные эффекты в компоненте, такие как обращения к API, подписки и т.д. Это аналог методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount в классовых компонентах.

    useEffect(() => {

    document.title = Вы нажали ${count} раз;

  }, [count]); // Эффект использует переменную состояния count

  

- useContext: Позволяет получить доступ к данным из контекста. Это упрощает передачу данных через дерево компонентов без необходимости передавать props на каждом уровне.

    const value = useContext(MyContext);

  

- useReducer: Предоставляет альтернативный способ управления состоянием, основанный на паттерне редьюсер. Это особенно полезно для управления сложным состоянием.

    const [state, dispatch] = useReducer(reducer, initialState);

  

- useCallback: Возвращает мемоизированный колбэк, который изменяется только если изменяются зависимости. Это помогает предотвратить ненужные ререндеры.

    const memoizedCallback = useCallback(() => {

    doSomething(a, b);

  }, [a, b]);

  

- useMemo: Мемоизирует вычисляемое значение. Это помогает избежать ненужных вычислений при каждом рендере.

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

  

- useRef: Возвращает изменяемый ref объект, который может быть использован для хранения значения на протяжении всего жизненного цикла компонента.

    const myRef = useRef(initialValue);

  

Хуки были введены для решения нескольких проблем:

✅ Упрощение переиспользования логики состояния между компонентами без необходимости создавать высшие порядковые компоненты или рендер-пропсы.

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

✅ Организация логики внутри компонента по принципу использования, а не жизненного цикла.



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



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



🔐 База собесов | 🔐 База тестовых