React state discipline

Two rules. Almost every React state bug is a violation of one of them.

1. useEffect is only for synchronizing with an external system.
2. State holds only what cannot be derived.

Rule 1: what useEffect is for

An external system is something outside React that does not know when your component renders:

• A subscription — WebSocket, event emitter, store outside React.
• A timer — setInterval, setTimeout.
• A browser API — IntersectionObserver, matchMedia, localStorage, document.title, focus, scroll position.
• A third-party library holding its own state — a map, a chart, an editor.