Какие использовал хуки

Вопрос

Какие использовал хуки

Профессия

Frontend Developer

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

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

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

• Использовал базовые хуки React: useState (для управления состоянием), useEffect (для side-эффектов), useContext (для доступа к контексту)
• Применял useRef для доступа к DOM-элементам и хранения мутабельных значений без ререндера
• Работал с пользовательскими хуками (custom hooks) для повторного использования логики, например, useFetch для запросов данных

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

React хуки — это функции, которые позволяют использовать состояние и другие возможности React без написания классов. Основные хуки, которые я использовал, включают useState, useEffect, useContext, useRef, а также пользовательские хуки. useState позволяет добавлять состояние в функциональные компоненты. Например, для управления формой или отслеживания кликов. useEffect используется для side-эффектов, таких как запросы к API или подписки на события. useContext предоставляет доступ к контексту, что удобно для передачи данных через дерево компонентов без пропсов. useRef помогает работать с DOM-элементами или хранить мутабельные значения без ререндера. Пользовательские хуки позволяют повторно использовать логику между компонентами, например, для обработки данных или управления состоянием.

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

Пример 1

Пример использования useState: управление состоянием инпута в форме. Код: `const [value, setValue] = useState('');`

Пример 2

Пример useEffect: загрузка данных при монтировании компонента. Код: `useEffect(() => { fetchData(); }, []);`

Пример 3

Пример useContext: доступ к теме приложения. Код: `const theme = useContext(ThemeContext);`

Пример 4

Пример useRef: фокусировка на инпуте. Код: `const inputRef = useRef(null); inputRef.current.focus();`

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

• Забывают указать зависимости в useEffect, что приводит к бесконечным циклам.
• Используют useRef для хранения состояния, которое должно вызывать ререндер.
• Неправильно используют useContext, не обернув компонент в Provider.

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

• Жизненный цикл компонентов в React
• Работа с контекстом (Context API)
• Пользовательские хуки и их применение
• Оптимизация производительности с useMemo и useCallback

Follow-up вопросы

Можете объяснить разницу между useState и useReducer?

Уровень: intermediate

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

Как работает useEffect и какие зависимости можно передавать?

Уровень: basic

useEffect выполняет side-эффекты после рендеринга компонента. В него можно передать массив зависимостей, и эффект будет выполняться только при изменении этих зависимостей. Если массив пустой, эффект выполнится только один раз после монтирования.

Как вы использовали useContext в своих проектах?

Уровень: intermediate

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

Можете привести пример использования пользовательского хука?

Уровень: advanced

Да, например, создал хук useFetch для выполнения HTTP-запросов. Он инкапсулирует логику запроса, обработки ответа и ошибок, что позволяет повторно использовать эту логику в разных компонентах.

В каких случаях вы использовали useRef и чем он отличается от useState?

Уровень: intermediate

useRef использовал для доступа к DOM-элементам, например, для фокуса на инпуте, и для хранения мутабельных значений, которые не требуют ререндера. В отличие от useState, изменение ref не вызывает повторный рендер компонента.