Effect subscribes without cleanup

next/effect-cleanupwarningreactcorrectness

Why it matters

Listeners, timers and observers created in an effect outlive the component and pile up each time the effect re-runs.

Fix

Return a function that removes the listener / clears the timer / disconnects the observer.

Credit

  • From the React team

    Effects that subscribe to external systems must return a cleanup function that undoes the setup.

References

See it