unexpected rerenders with selectById

I have a hook which does a simple selectByID from the store.

// store

export const useTypedSelector = createSelectorHook<RootState>();

// hook

useCurrentStatus = (statusId: string) => {
  return useTypedSelector((state) =>
    apiStatusSelectors.selectById(state, statusId)
  );
}

Now for some reason when I render a component for the first time, all the components which have the same status id render as well.

I looked in the react profiler and it said these components were rendering because of hook changes.

So I manually diffed the hooks and found that one of the subhooks of selectById appears to be triggering the render.

    {
      "name": "SelectorWithStoreAndSubscription",
      "subHooks": [
        {
          "name": "Reducer",
          "value": 3,
          "subHooks": []
        },

Specifically the value on "SelectorWithStoreAndSubscription" increments whenever I render a new component.

Any ideas where "SelectorWithStoreAndSubscription" is coming from and why those values would be changing across components?

[markerikson]

Sorry, I’m a bit confused. selectById is a selector - it doesn’t have any “hooks” or “subhooks”. Are you referring to useSelector itself there? That counter looks like the internal value that useSelector uses to force a re-render. However, it only does that if the reference returned by your selector changes from the last time.

selectById is memoized, but ultimately comes down to a straight lookup: return state.entities[id], effectively. On the one hand, using the same selectById instance across multiple components will never memoize correctly, but because it’s a lookup, it shouldn’t actually matter on a per-component basis.

Can you put together a CodeSandbox that shows this issue?

[markerikson]

ah, gotcha!