useStore

useStore

useStore() hands you the store object itself — the same one you passed to <Provider>. It does not subscribe, so a component that only calls useStore never re-renders when the state changes.

Reading state without subscribing to itJavaScript

function ExportButton() {
  const store = useStore(), dispatch = useDispatch();   // both from react-redux
  const download = () => {
    const snapshot = store.getState().cart;   // read at click time, not at render time
    dispatch({ type: 'cart/exported', payload: snapshot.items.length });
    save(JSON.stringify(snapshot));
  };
  return <button onClick={download}>Export cart</button>;
}

That is the shape of every legitimate use: an event handler needs a value the component does not render. Reading it through useStore keeps that component out of the subscriber list, so a cart with two hundred items does not re-render the button every time one changes, and store.getState() is always current where a value captured by useSelector is only as fresh as the last render. Calling store.getState() during render, by contrast, is a bug: React 7,897 has not subscribed to that value, so the component renders stale data and never updates.

MENU