Using useEffect Effectively
summary
Argues that useEffect is for ongoing activity effects (subscriptions, listeners) not for one‑off action effects, shows React 18’s double‑exec on mount (strict mode in dev) causing refetch and race issues, and demonstrates fixing a thumbnail→fullscreen video example by replacing three tangled useEffects with explicit event handlers and a state‑machine (XState) transition. Recommends concrete tools: useSyncExternalStore, React Query/SWR/Next.js loaders for fetching, and moving fire‑and‑forget logic out of useEffect.
AI-written summary · about
chapters (8)
- 0:00useEffect introduction and challenges
- 3:15Dependency array and loops
- 6:23React 18 strict mode
- 9:13Activity vs action effects
- 13:05When not to use useEffect
- 17:23Fetching data without useEffect
- 20:33Handling user events outside useEffect
- 23:45Summary
