React: Avoid useEffect

Goal

Use useEffect only to sync with external systems. Keep pure React logic in render or event handlers.

Rules

• Use effects for subscriptions, timers, browser APIs, third-party libraries, analytics, and document title updates.
• Calculate derived state during render.
• Handle user actions in event handlers.
• Reset child state with a key.
• Use useSyncExternalStore for external stores.
• Use query libraries for server data when available.
• Do not use effects as general state management.
• Do not use effects to copy props into state unless there is a real reset model.

Flow