[RTKQ] When using selectFromResult even focus triggers a component re-render

[gabrielferreira-cit]

I'm trying to use the selectFromResult to transform the original data array.

const plannersData = useGetAllPlannersQuery(
    { businessUnitCode },
    {
      selectFromResult: ({ data }) =>
        data && data.map((it) => ({ value: it.id, label: it.name })),
    },
  );

However I've noticed that my component is re-rendering a LOT, even when the page simply gets focused. Just commenting out the selectFromResult stops the unnecessary re-renders. Does anyone know why that would happen and how can I avoid it?

Redux Toolkit version: 1.6.0
React version: 17.0.2

[phryneas]

You are creating a new object on each render - they will always be "different object" and have the same problem as doing the same thing in a normal Redux selector. At that point you will need to use a memoized selector for that.

[markerikson]

Yep - see https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#selecting-values-from-results and https://redux.js.org/usage/deriving-data-selectors .