Question: Why do hooks useRef instead of useState

[mfbx9da4]

I've noticed for a few state libraries, including zustand, use useRef, diff the previous value and then forceRender(), instead of leaving this to useState which does all this for free. Why is that?

My guess it's something to do with isomorphic layouts?

[dai-shi]

basically, it's to support inline (non-memoized) selectors (and to avoid re-subscribing when selectors change).

with #550, we no longer have explicit useRef.

[mfbx9da4]

Thanks for your prompt response.

But can't you support non-memoized selectors and avoid re-subscribing like so:

function useStore(selector) {
  const ref = useRef({ selector }).current;
  ref.selector = selector;
  const [state, setState] = useState(selector(value));
  useEffect(() => subscribe(x => setState(ref.selector(x))), []);
  return useMemo(() => [state, set], [state]);
}

• Selector always stays up to date
• Don't resubscribe every time the selector changes

[dai-shi]

no, you want to support changing the selector. useStore(state => state[props.key])

Selector always stays up to date

this doesn't work, if state is not changed, but only props.key changes.

[mfbx9da4]

Ah gotcha! The resulting state will be stale until the underlying state itself changes.