It's OK to useStore with React-Redux

Dylan Grandmont — Wed, 16 Jun 2021 17:56:32 +0000

I recently had two members of my team independently confuse themselves with a subtle point in the react-redux bindings. We have a few instances where a component includes callbacks and inside of those callbacks we need to compute some values from our redux state. We take those values and dispatch an action:

import { useDispatch } from 'react-redux';

function Component() {
  const dispatch = useDispatch();

  function callback() {
    const value = ... // requires us to compute a value from the state
    dispatch(someAction(value))    
  }

  return <div onClick={callback} ... ></div>
}

There are two relevant APIs in react-redux here: useSelector and useStore. useSelector accepts a selector, a function which computes a value from state; when that value changes, the component will re-render.

useStore on the other-hand, provides access to the redux store within component, but it will not re-render the component on any state changes.

The confusion I've seen comes from a small comment within the react-redux docs:

[useStore] 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.

I think this statement makes sense. The primary use-case is to connect your component to a store so that when a particular part of the store changes, the component re-renders. useSelector achieves this and that is the intent of the statement. However, it's easy to misunderstand this as useStore is "discouraged" and this causes trouble.

Suppose you interpret the statement, as my team members did, as "useSelector should always be preferred". In the above example, this will produce a solution like:

import { useDispatch, useSelector } from 'react-redux';

function Component() {
  const dispatch = useDispatch();
  const value = useSelector(someSelector) // compute value from state

  function callback() {
    dispatch(someAction(value))    
  }

  return <div onClick={callback} ... ></div>
}

But this doesn't make sense. We don't need to re-render the component when value changes! Nothing in the rendered output displays the result of value. We only need to evaluate value when the callback is executed. And if value changes frequently in the state, then we are doing a lot of re-renders that we don't need to.

This is one of those "less common scenarios" where we do want access to the store directly:

import { useDispatch, useStore } from 'react-redux';

function Component() {
  const dispatch = useDispatch();
  const store = useStore();

  function callback() {
    const value = someSelector(store.getState())
    dispatch(someAction(value))    
  }

  return <div onClick={callback} ... ></div>
}

This allows the UI to update only when needed and for the correct value to be computed just-in-time, when the callback is executed.

Forem: Dylan Grandmont

It's OK to useStore with React-Redux