Comparison
External storevsSelector
External store
the value lives outside the component tree and components subscribe to just the slice they read.
State held outside the framework, with components subscribing to changes. It avoids re-rendering a whole subtree for a value only one leaf reads, and it survives being read outside React entirely. The costs are tearing during concurrent rendering if the store is not integrated properly, and the temptation to put everything in it, which turns local state into global state nobody can trace.
Full entry →Selector
the component subscribes to one field of the store, so changes to the rest do not wake it up.
A function that extracts the slice of state a component actually needs, letting the subscription compare just that slice. It is how a large store avoids re-rendering the world on every change. The trap is a selector that builds a new object or array each call, which is a fresh reference every time and defeats the comparison it exists to enable.
Full entry →