Working with a selector and useSubscription

The useStore hook we created in the previous section returns a whole state object. This means that any small part of the state object change will notify all useStore hooks and it can cause extra re-renders.

To avoid extra re-renders, we can introduce a selector to return the only part of the state that a component is interested in.

Let's first develop useStoreSelector.

We use the same createStore function defined in the previous section and create a store variable as follows:

const store = createStore({ count1: 0, count2: 0 });

The state in store has two counts – count1 and count2.

The useStoreSelector hook is similar to useStore, but it receives an additional selector function. It uses the selector function to scope the state:

const useStoreSelector = <T, S>(
  store: Store<T>,
  selector: (state: T) => S
) => {
  const [state, setState] =
   ...