Keeping Components Pure

React assumes every component you write is a pure function, which means two things: it minds its own business, not changing any objects or variables that existed before it was called, and it returns the same JSX for the same inputs. Purity makes components safe to run in a different environment such as the server, safe to skip re-rendering when inputs have not changed, and safe to abandon mid-render when newer data arrives. Rendering can happen at any time, so components must not depend on each other's rendering sequence, and you must not mutate the inputs used for rendering — props, state, or context — but instead set state to update the screen. Local mutation is the exception: changing variables created during the same render is fine because no outside code can observe it. Side effects such as updating the screen, starting an animation, or changing data belong in event handlers, which do not run during rendering and therefore do not need to be pure; calling useEffect for a side effect should be a last resort after other options are exhausted. Strict Mode calls each component's function twice during development to surface impurity, and has no effect in production. Scope: React rendering. Reviewed October 4, 2026.