Overview
A side effect is any state change a function makes beyond its return value: mutating an argument or global, writing to disk, sending a request, logging, or touching the DOM. A function without side effects is pure: the same inputs always give the same output and nothing else changes. Push side effects to the edges of a program and keep core logic pure, so tests run without mocks and retries stay safe. Name functions that write or send so callers can see it.
Rules
- Isolate effects behind injected dependencies (dependency-injection).
- Make repeated effects safe (idempotent).
- In React,
useEffectis the explicit place for effects triggered by rendering. Rendering itself must stay pure (react-hooks).
Related
- idempotent: how effects behave on retry.
- immutable-data: mutating shared data is the canonical side effect.
- dependency-injection: makes effects swappable in tests.
- react-hooks:
useEffectas the effect container. - testing: pure code needs fewer mocks.
- general-principles: the broader principles.