Какие знаешь Hooks в React

Вопрос

Какие знаешь Hooks в React

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает основные встроенные хуки React, их назначение и применение. Также важно показать знание оптимизации с помощью useMemo и useCallback.

Ключевые тезисы

• useState — для управления состоянием компонента.
• useEffect — для выполнения побочных эффектов, таких как запросы к API или подписка на события.
• useContext — для доступа к контексту без использования промежуточных компонентов.
• useReducer — для управления сложным состоянием с использованием редьюсеров.
• useMemo — для мемоизации вычислений и оптимизации производительности.
• useCallback — для мемоизации функций, чтобы избежать лишних ререндеров.
• useRef — для хранения мутабельных значений, которые не вызывают ререндер.
• useLayoutEffect — аналогичен useEffect, но выполняется синхронно после рендера и перед отрисовкой DOM.

Подробный ответ

React Hooks — это функции, которые позволяют использовать состояние и другие возможности React без написания классов. Они появились в React 16.8 и с тех пор стали стандартом для функциональных компонентов. Основные хуки включают useState, useEffect, useContext, useReducer, useMemo, useCallback, useRef и useLayoutEffect. useState используется для управления состоянием компонента, например, для хранения данных формы или флага видимости. useEffect позволяет выполнять побочные эффекты, такие как запросы к API или подписка на события, после рендера компонента. useContext упрощает доступ к контексту, что полезно для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. useReducer используется для управления более сложным состоянием, особенно когда логика обновления состояния требует нескольких шагов. useMemo и useCallback помогают оптимизировать производительность, мемоизируя значения и функции соответственно, чтобы избежать лишних ререндеров. useRef позволяет хранить мутабельные значения, которые не вызывают ререндер, например, ссылки на DOM-элементы. useLayoutEffect похож на useEffect, но выполняется синхронно после рендера и перед отрисовкой DOM, что полезно для работы с макетом.

Практические примеры

Пример 1

Пример использования useState: const [count, setCount] = useState(0);
return (<button onClick={() => setCount(count + 1)}>Количество: {count}</button>);

Пример 2

Пример использования useEffect: useEffect(() => { fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data)); }, []);

Пример 3

Пример использования useContext: const theme = useContext(ThemeContext); return <div style={{ background: theme.background }}>Тематический контент</div>;

Пример 4

Пример использования useReducer: const [state, dispatch] = useReducer(reducer, initialState); return (<button onClick={() => dispatch({ type: 'increment' })}>Увеличить</button>);

Частые ошибки

• Типичная ошибка — использование useEffect без второго аргумента (массива зависимостей), что приводит к выполнению эффекта при каждом рендере, даже если это не требуется.
• Еще одна ошибка — неправильное использование useMemo и useCallback, когда они применяются для всех функций или значений, даже если это не приводит к реальной оптимизации.

Связанные темы

• Связанная тема — управление состоянием в React, включая Redux и Context API.
• Еще одна связанная тема — оптимизация производительности в React, включая использование React.memo и PureComponent.

Follow-up вопросы

В чем разница между useEffect и useLayoutEffect?

Уровень: intermediate

useEffect выполняется асинхронно после рендера и отрисовки DOM, а useLayoutEffect — синхронно после рендера, но перед отрисовкой DOM. Это полезно, когда нужно измерить DOM или внести изменения до отображения.

Когда стоит использовать useReducer вместо useState?

Уровень: intermediate

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

Как работает useContext и в каких случаях его применяют?

Уровень: basic

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

Почему useCallback и useMemo важны для оптимизации?

Уровень: advanced

useCallback мемоизирует функции, а useMemo — значения, что предотвращает лишние ререндеры дочерних компонентов. Это особенно полезно при передаче колбэков или тяжелых вычислениях.

Можно ли создавать свои хуки? Если да, то как?

Уровень: intermediate

Да, кастомные хуки — это функции, начинающиеся с 'use', которые могут использовать другие хуки. Они помогают переиспользовать логику между компонентами, например, для работы с API или управления формой.