Писал ли кастомные хуки

Вопрос

Писал ли кастомные хуки

Профессия

Frontend Developer

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

Интервьюер хочет убедиться, что кандидат понимает принципы создания и применения кастомных хуков, умеет абстрагировать логику и знает их преимущества (переиспользуемость, чистота кода).

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

• Да, писал кастомные хуки для решения повторяющихся задач, таких как управление состоянием формы, обработка API-запросов или работа с локальным хранилищем.
• Пример: создал хук useFetch для абстракции логики запросов к API, который включает обработку загрузки, ошибок и данных.
• Использовал кастомные хуки для разделения логики и UI, что улучшило читаемость и переиспользуемость кода.
• Следовал правилам хуков (не вызывать их условно) и документировал их для удобства команды.

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

Кастомные хуки в React — это мощный инструмент для абстракции и повторного использования логики в функциональных компонентах. Они позволяют выносить повторяющуюся логику в отдельные функции, что упрощает поддержку и улучшает читаемость кода. Основная идея кастомных хуков заключается в том, чтобы инкапсулировать сложную логику, такую как управление состоянием, обработка API-запросов или работа с локальным хранилищем, в отдельные функции, которые затем можно использовать в разных компонентах. Это особенно полезно в крупных проектах, где одна и та же логика может использоваться в нескольких местах. Кастомные хуки следуют тем же правилам, что и стандартные хуки (например, их нельзя вызывать условно), и должны быть хорошо документированы для удобства команды. Примером может служить хук useFetch, который абстрагирует логику выполнения запросов к API, включая обработку загрузки, ошибок и данных. Это позволяет уменьшить дублирование кода и упростить его тестирование.

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

Пример 1

Пример кастомного хука useFetch для выполнения запросов к API: function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch(url) .then(response => response.json()) .then(data => { setData(data); setLoading(false); }) .catch(error => { setError(error); setLoading(false); }); }, [url]); return { data, loading, error }; } Этот хук можно использовать в любом компоненте для выполнения запросов, что упрощает работу с API.

Пример 2

Пример кастомного хука useLocalStorage для работы с локальным хранилищем: function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { return initialValue; } }); const setValue = value => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error(error); } }; return [storedValue, setValue]; } Этот хук позволяет легко синхронизировать состояние компонента с локальным хранилищем.

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

• Типичная ошибка — вызов хуков условно или вне функционального компонента. Это нарушает правила хуков и приводит к ошибкам.
• Еще одна ошибка — недостаточная документирование кастомных хуков, что затрудняет их использование другими разработчиками.

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

• Основы React и функциональных компонентов
• Правила хуков и их ограничения
• Тестирование React-компонентов и хуков

Follow-up вопросы

Можешь привести пример кастомного хука, который ты написал, и объяснить его логику?

Уровень: basic

Пример: хук useLocalStorage для синхронизации состояния с localStorage. Он принимает ключ и начальное значение, использует useState для хранения состояния и useEffect для обновления localStorage при изменении значения.

Как ты тестируешь кастомные хуки?

Уровень: intermediate

Использую React Testing Library и @testing-library/react-hooks. Например, для хука useFetch создаю тесты, проверяющие состояния загрузки, ошибки и успешного получения данных.

Сталкивался ли ты с проблемами при создании кастомных хуков? Как их решал?

Уровень: intermediate

Да, например, при создании хука useDebounce для отложенного выполнения функции. Проблема была в очистке таймера при размонтировании компонента. Решил через возврат функции очистки в useEffect.

Как ты решаешь, стоит ли выносить логику в кастомный хук?

Уровень: advanced

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

Как ты оптимизируешь производительность кастомных хуков?

Уровень: advanced

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