useRef, Context and Custom Hooks: DOM Access, Context Instead of DI and the Rules of Hooks
useRef is a box that does not trigger renders (a DOM node or a timer id), while Context carries a value deep into the tree without props and re-renders every component that reads it when it changes. We move the Bookstore cart, theme and user into Context, measure a version where a theme change renders 28 components instead of 2, and show an inline ref callback stealing focus, a conditional hook crashing the app and the search split into custom hooks.
15 Nov 2026
·
19 min
·
4
