RTK Query: Is it possible to handle isLoading of different endpoints centrally?

[FurkanCodes]

In RTK Query, I have two mutations that fire up different endpoints;

const [fetchById] = useFetchByIdMutation();
const [sendId] = useSendIdMutation();

On my component,I use these two different methods on two different button clicks and I need to pass isLoading state to a component I have which renders a loader;

<Loader blocked={isLoading}fullScreen />

I access the loader states as this;

const [fetchById, {isLoading: isFetchByIdLoading}] = useFetchByIdMutation();
const [sendId, {isLoading: isSendByIdLoading}] = useSendIdMutation();

<Loader blocked={isSendByIdLoading || isFetchByIdLoading} fullScreen />

This actually makes Loader appear onthe screen,but am I actually suppose to handle loading states for each and every mutation I use inside a component? Is there any functionality that centralizes this? Or am I completely misusing this?

I am thinking about setting the state of isLoading for each button click to reduxstore then use that state for the Loader component.

[santirodriguezaffonso]

Well, what you could do is use a useMemo variable. This is a workaround that I usually use.

   const isLoading = useMemo(() => isFetchByIdLoading || isSendByIdLoading, [isFetchByIdLoading, isSendByIdLoading])

[phryneas]

That's more expensive than without useMemo.

[santirodriguezaffonso]

@phryneas by the way I left a question regarding RTK Query in StackOverflow. I really appreciate it if you could take a look!

[phryneas]

@santirodriguezaffonso to clear up the confusion: Which of the two pieces of code do you think is more expensive?

const isLoading = isFetchByIdLoading || isSendByIdLoading

or

function calculateNewState() {
  return isFetchByIdLoading || isSendByIdLoading
}
let lastDependencyArray
let lastResult 
const currentDependencyArray = [isFetchByIdLoading, isSendByIdLoading]
for (let i=0; i<currentDependencyArray.length; i++) {
  if (lastDependencyArray[i] !== currentDependencyArray[i]) {
    lastResult = calculateNewState()
    break;
  }
}
lastDependencyArray = currentDependencyArray
return lastResult

The second is a simplified version of useMemo.
useMemo is great to prevent expensive calculations, but a || b is pretty much the cheapest calculation a computer can do and executing useMemo probably takes 20 times as long.

As for your other question: please don't ping directly. You already opened an issue on this.