Adiós, useEffect: Managing Effects More Effectively
summary
Argues useEffect often misleads: runs effects twice on mount in react 18 strict mode, causing surprising re‑runs and infinite loops. Recommends moving fire‑and‑forget work into event handlers, using use sync external store for subscriptions, modeling effects as state transitions with state machines, and adopting render as you fetch or tools like react query / Remix for data. Shows concrete code patterns and a video demo that replace messy dependency arrays with predictable, testable synchronization.
AI-written summary · about
chapters (21)
- 0:00Managing effects in React
- 1:11Why developers struggle
- 2:56Core problem with useEffect
- 4:44Sync vs lifecycle
- 5:45Infinite loops pitfalls
- 7:53Flawed dependency array
- 10:02React 18 double execution
- 11:46Synchronized effects
- 14:34Where effects belong
- 16:42Effects in state transitions
- 18:28When you don't need useEffect
- 20:57Transforming data without useEffect
- 22:22Parent communication without useEffect
- 24:26Subscribing to external stores
- 26:54Declarative effects with state machines
- 30:07Demo: state machine effects
- 33:16Advanced state machine logic
- 36:10Fetching data without useEffect
- 39:18Problems with useEffect for data fetching
- 40:45Initializing singletons
- 41:46Effective effect management
