React Effects

What you'll learn

• What an effect is and where it sits in the render cycle
• How the dependency array changes what runs and when
• Why cleanup runs before the next effect, not only on unmount
• The misuses of useEffect and what to use instead
• How to sync React with stores, storage, and third-party widgets
• Why fetching in an effect is rarely the production answer in 2026

1. 01
   What an effect is

   Code that runs after render, for things outside React. Build the mental model before any code.
   13 min
2. 02
   The dependency array

   Empty, missing, and populated. What exhaustive deps means and why the lint rule is right.
   16 min
3. 03
   Cleanup functions

   Subscriptions, timers, listeners. Cleanup runs before the next effect, not only on unmount.
   15 min
4. 04
   You might not need an effect

   Compute during render, lift on event, reset with key. The table of common useEffect misuses.
   16 min
5. 05
   Syncing with external systems

   Stores, localStorage, third-party widgets. The shape of an effect that earns its place.
   15 min
6. 06
   Fetching in an effect, carefully

   Race conditions, AbortController, and a peek at the modern pattern in Server Components and use().
   15 min
7. 07
   Effects and StrictMode double-runs

   Why dev runs effects twice, and how to design them so it never matters.
   11 min
8. 08
   useLayoutEffect in one lesson

   Measure-then-paint, the one case useEffect can't cover. Otherwise, stick with useEffect.
   11 min