React Observer Hooks: 7 Ways to Watch the DOM Without the Boilerplate The DOM does not tell React when it changes. React owns one direction of the data flow — state goes in, markup comes out — and is mostly blind on the way back. If a third-party script injects a banner, if a font finishes loading and shoves the layout down 8 pixels, if a user resizes the window or scrolls a card into view, React has no idea unless you tell it. The browser ships four *Observer APIs to plug that gap, plus the getBoundingClientRect family for one-shot reads, and together they cover almost every "react to the DOM" requirement a real app has. The trouble is that wiring observers into a React component is a small swamp of useEffect , useRef , cleanup functions, SSR guards, and the dreaded "observer fires before mount" race. Five lines of API turn into thirty lines of glue, and the glue is identical between components — so it gets copy-pasted, slightly mutated each time, and quietly accrues bugs.…