Comparison
Derived statevsEffect
Derived state
you stored the filtered list in state as well as the raw list, and now they need keeping in sync.
A value that can be computed from existing state and therefore should not be stored separately. Storing it turns one update into two and introduces an ordering bug the first time only one of them runs. Computing it during render is almost always cheap enough; when it genuinely is not, memoise the computation rather than storing the result.
Full entry →Effect
you needed to reach outside the component — to the DOM, a socket, a timer — after the render finished.
Code that runs after render to synchronise the component with something outside the framework's control. It exists for subscriptions, imperative DOM work and non-React widgets, and it is routinely misused for deriving values or fetching data, both of which have better answers. Every effect that sets up something needs a cleanup, because it will run again on the next dependency change and twice in development on purpose.
Full entry →