Effect Events & Stable Synchronization

Use Effect Events & Stable Synchronization as an escape hatch for synchronizing with a system outside React. Verify setup/cleanup symmetry, dependency correctness, race cancellation, and repeated setup in Strict Mode.

Build a Complete Mental Model

Use Effect Events & Stable Synchronization as an escape hatch for synchronizing with a system outside React. Verify setup/cleanup symmetry, dependency correctness, race cancellation, and repeated setup in Strict Mode.

Apply It in Production React

Test an original Effect Events & Stable Synchronization example with empty/loading/error states, keyboard-only interaction, a slow network, rapid repeated events, and component unmount/remount cases. Verify behavior with the browser console, React DevTools, tests, and profiler where relevant.

After This Lesson

• Explain the source of truth and component boundary
• Build an example with keyboard and failure states
• Verify one user-visible behavior with a test or profiler

import { useEffect, useEffectEvent, useState } from 'react';

export default function Clock({ locale }) {
  const [time, setTime] = useState('');
  const updateClock = useEffectEvent(() => {
    setTime(new Date().toLocaleTimeString(locale));
  });
  useEffect(() => {
    updateClock();
    const id = setInterval(updateClock, 1000);
    return () => clearInterval(id);
  }, []);
  return <time>{time}</time>;
}

The clock updates every second and reads the latest locale without restarting the interval.

useEffectEvent — React