С какими хуками работал в проектах

Вопрос

С какими хуками работал в проектах

Профессия

Frontend Developer

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

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

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

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

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

Хуки в React позволяют использовать состояние и другие возможности React без написания классов. Основные хуки, такие как useState и useEffect, используются для управления состоянием и побочными эффектами в функциональных компонентах. useState позволяет добавлять локальное состояние в функциональные компоненты, а useEffect заменяет методы жизненного цикла, такие как componentDidMount, componentDidUpdate и componentWillUnmount. useReducer полезен для управления сложным состоянием, особенно когда логика состояния включает множество подзначений или когда следующее состояние зависит от предыдущего. useContext позволяет передавать данные через дерево компонентов без необходимости прокидывать пропсы на каждом уровне, что особенно полезно для тем, локализации или других глобальных данных. Пользовательские хуки позволяют создавать повторно используемую логику, что делает код более чистым и модульным.

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

Пример 1

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

Пример 2

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

Пример 3

Пример использования useReducer: управление состоянием корзины покупок. Например, const [state, dispatch] = useReducer(cartReducer, initialCart);, где cartReducer обрабатывает действия типа ADD_ITEM или REMOVE_ITEM.

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

• Использование useEffect без массива зависимостей, что может привести к бесконечным циклам рендеринга.
• Неоптимальное использование useMemo и useCallback, что может привести к излишней сложности кода без реальной выгоды для производительности.

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

• React Context API для глобального управления состоянием.
• React.memo для оптимизации производительности компонентов.
• Правила хуков: хуки можно вызывать только на верхнем уровне компонентов или других хуков.

Follow-up вопросы

Можешь привести пример, когда ты использовал useReducer вместо useState?

Уровень: intermediate

Использовал useReducer в проекте с корзиной покупок, где было много действий (добавление, удаление, изменение количества товаров). Это помогло централизовать логику и упростить тестирование.

Как ты решал проблему лишних ререндеров с помощью useMemo и useCallback?

Уровень: intermediate

Применял useMemo для мемоизации тяжелых вычислений (например, фильтрации списка). useCallback использовал для стабилизации колбэков, передаваемых в дочерние компоненты, чтобы избежать их пересоздания при каждом рендере.

Как ты создавал пользовательские хуки и для каких задач?

Уровень: advanced

Создавал хуки для работы с API (например, useFetch), управления состоянием форм (useForm) и подписки на события. Это позволило повторно использовать логику и сократить дублирование кода.

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

Уровень: intermediate

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

Как ты использовал useContext в сочетании с useReducer?

Уровень: advanced

Комбинировал их для создания глобального хранилища состояния (аналог Redux). useReducer управлял состоянием, а useContext предоставлял доступ к нему и dispatch в любом компоненте.