Rendering, Purity & Strict Mode
A render is a calculation of the UI for the current props and state. React may call component functions more than once during development or as part of its rendering strategy. Therefore, rendering code should be pure: it should not make network requests, mutate external objects, subscribe to services, or perform other side effects.
React Strict Mode deliberately exposes certain unsafe patterns during development. Seeing a component render more than once in development is not evidence that production necessarily performs the same sequence. Treat render as repeatable and move side effects into appropriate effects or event handlers.
Purity does not mean an application cannot have side effects. It means side effects should happen at explicit boundaries where their lifecycle can be controlled.
If development exposes duplicate effects or renders, first ask whether your code is relying on an effect or render being called exactly once. Fix the lifecycle assumption rather than adding flags to hide it.
- Render functions should be pure and repeatable.
- Strict Mode is a development aid for finding unsafe assumptions.
- Event handlers and effects are different side-effect boundaries.