React Best Practices

Performance and architecture guide for React and frontend applications. This fork keeps the broad upstream performance guidance, but it changes the default stance on useEffect: treat it as a synchronization escape hatch, not as a general control-flow tool.

Default Stance On useEffect

• useEffect is a last resort.
• Only use an effect when React must synchronize with something outside React: DOM APIs, subscriptions, timers, sockets, third-party widgets, or browser APIs.
• If the code can run during render, in an event handler, in a loader/server function, or via a keyed reset, do that instead.
• Do not add effects just to keep React values in sync with other React values.

Before You Add An Effect

Ask these questions in order: