Use Effects as escape hatches
Decide when code belongs in render, an event handler, or an Effect.
The move: ask what world the code is syncing with. React's render phase is for calculating what the UI should look like from current props and state. Event handlers are for user-triggered actions. Effects are for synchronization with external systems after the UI is committed. This split prevents accidental feedback loops. A derived value in an Effect causes an extra render. A click-specific API call in an Effect may fire on page load or refresh because the Effect cannot know which user action caused the current state. A subscription or DOM integration, however, really does need an Effect because React…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in