React Best Practices

Core Principle: Effects Are Escape Hatches

Effects let you "step outside" React to synchronize with external systems. Most component logic should NOT use Effects. Before writing an Effect, ask: "Is there a way to do this without an Effect?"

When to Use Effects

Effects are for synchronizing with external systems:

• Subscribing to browser APIs (WebSocket, IntersectionObserver, resize)
• Connecting to third-party libraries not written in React
• Setting up/cleaning up event listeners on window/document
• Fetching data on mount (though prefer React Query or framework data fetching)
• Controlling non-React DOM elements (video players, maps, modals)

When NOT to Use Effects

Derived State (Calculate During Render)