Core answer
Start here. This is the direct spoken answer to practice first.
Overview
Reading a mutable singleton during render is not a subscription strategy and can produce stale or inconsistent UI.
useSyncExternalStore lets a component subscribe to state owned outside React, such as a store or browser API. The store provides subscribe and getSnapshot; React rerenders when the snapshot changes. getSnapshot must return a cached immutable value until the store actually changes, and an optional server snapshot keeps server rendering and hydration consistent.