React JS and Redux: useSelector() vs useStore()

Question

I would like to know what is the difference between useSelector and UseStore. Are there any advantages on using one instead of the other? Thanks.

useSelector

  const { pages } = useSelector((state: RootState) => {
    return {
      pages: state.pages
    };
  });
  console.log(pages);

useStore

  const pageArrayTwo = useStore();
  const pageArray = pageArrayTwo.getState().pages;
  console.log(pageArray);

Same Output On Both Cases

[{…}]
0: {id: 1, title: "Use Redux", content: "Welcome"}
length: 1
__proto__: Array(0)

Here's the best explication I've found https://stackoverflow.com/a/57202109/11090321 — Mahdi N, Apr 18 '20 at 16:25

score 20 · Accepted Answer · answered Apr 18 '20 at 16:55

20

UseSelector, the main advantage here is that it does a shallow comparison of the previous selector result, thus potentially not re-rendering if the result would be the same.

When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.

useStore just gets you access to the store object, do any component logic based on accessing the store's state won't benefit from this check. In fact, redux even recommends against using it for this purpose.

This hook should probably not be used frequently. Prefer useSelector() as your primary choice. However, this may be useful for less common scenarios that do require access to the store, such as replacing reducers.

answered Apr 18 '20 at 16:55

Drew Reese

165,259
14
153
181

3

I realize the docs advise against using `useStore`, however what about the case for accessing state within a callback? If the state is not used in UI and only needed lazily (ie only inside a callback/press handler), this seems like a decent way to prevent unneeded rerenders. – sbearben May 31 '21 at 15:58
@sbearben What sort of access to state are you needing in a callback? `useStore` wouldn't be a valid React hook call in a callback. Instead you'd access state via the store's [getState](https://redux.js.org/api/store#getstate) method. – Drew Reese May 31 '21 at 19:00
Exactly that, we'd use `getState` to access state within the callback. Apologies for not making it clear in my question. – sbearben May 31 '21 at 21:43
@sbearben I see, is there still a question here then? – Drew Reese May 31 '21 at 22:26

score 4 · Answer 2 · answered Apr 18 '20 at 16:31

useSelector: This is just a simple function, which takes in a function that takes the state as an argument and returns a value. Used to get a single value from state. Can act as a replacement for mapStateToProps.

useDispatch: returns a reference to the dispatch object. It can act as a replacement for mapDispatchToProps.

useStore: returns an instance of the store. Generally not recommended, because the component which uses this will not get updated. In such case use have to use react hooks like useEffect o explicitly update the component.

Please the sample here which is posted on other stack instance other stackoverflow instance

React JS and Redux: useSelector() vs useStore()

2 Answers2