> Можно ли использовать useEffect в кастомном хуке (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Консорциум кодекс

Стек: React

> Пример ответа

Да, можно и часто нужно. useEffect - это обычный хук React, и его можно вызывать внутри кастомного хука, следуя тем же правилам: он должен вызываться на верхнем уровне и только внутри функционального компонента или другого хука.

Пример: кастомный хук для подписки на статус онлайн пользователя.

JAVASCRIPT
import { useState, useEffect } from 'react';
function useOnlineStatus() {
const [isOnline, setIsOnline] = useState(navigator.onLine);
useEffect(() => {
const handleOnline = () => setIsOnline(true);
const handleOffline = () => setIsOnline(false);
window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);
// Очистка эффекта при размонтировании
return () => {
window.removeEventListener('online', handleOnline);
window.removeEventListener('offline', handleOffline);
};
}, []); // Пустой массив зависимостей - эффект выполняется один раз
return isOnline;
}
// Использование в компоненте
function App() {
const online = useOnlineStatus();
return <div>{online ? 'Online' : 'Offline'}</div>;
}

Важно: не забывайте про очистку эффектов (return-функцию) в кастомных хуках, особенно при подписках или таймерах, чтобы избежать утечек памяти.

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью