Таймаут‑переключатель состояния при изменении входных данных

Условие

Компонент получает пропс data, который может обновляться. При каждом изменении data нужно запустить задержку в 3 секунды, после которой состояние focusState меняется на противоположное.

const App = ({ data }) => {
    const [focusState, setFocusState] = useState(false);
    return null;
}

Ответ

Создайте таймер в useEffect с зависимостью data и очистите его при следующем изменении либо размонтировании. Состояние переключайте функциональным updater, чтобы не захватить старое значение.

useEffect(() => {
  const timer = setTimeout(() => setFocusState(previous => !previous), 3000);
  return () => clearTimeout(timer);
}, [data]);

В этом варианте быстрые изменения data перезапускают ожидание: переключение произойдёт через три секунды после последнего. Эффект срабатывает также при первом монтировании. Для объекта сравнивается ссылка по Object.is, а не глубокое содержимое. Если требуется отдельное переключение для каждого изменения, нельзя отменять все предыдущие таймеры — это другой контракт.