React Hooks Recipes

const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
  inputRef.current?.focus();
}, []);

# Use a ref and an effect to focus an input after mount.

const [seconds, setSeconds] = useState(0);
useEffect(() => {
  const id = setInterval(() => setSeconds(s => s + 1), 1000);
  return () => clearInterval(id);
}, []);

# Update state on an interval with cleanup.

const [draftName, setDraftName] = useState(name);
useEffect(() => {
  setDraftName(name);
}, [name]);

# Initialize from props, then manage locally.

useEffect(() => {
  if (!ref.current) return;
  const observer = new ResizeObserver(([entry]) => {
    setSize(entry.contentRect);
  });
  observer.observe(ref.current);
  return () => observer.disconnect();
}, []);

# Use a ref plus ResizeObserver.

useEffect(() => {
  let stopped = false;
  async function load() {
    const data = await fetch('/api/status').then(r => r.json());
    if (!stopped) setStatus(data);
  }
  load();
  const id = setInterval(load, 5000);
  return () => {
    stopped = true;
    clearInterval(id);
  };
}, []);

# Periodically refresh data until unmount.

const [isPending, startTransition] = useTransition();
function handleAdd(todo: Todo) {
  setTodos(prev => [...prev, todo]);
  startTransition(async () => {
    await saveTodo(todo);
    refreshTodos();
  });
}

# Apply urgent optimistic state and schedule reconciliation.