Is createApi really better ?

[Ronnin1994]

Hello !

I have two questions:

1. When I get data from my Api using the method created by createApi, it renders my application 3 times in a row. Is it not inneficient to trigger so many render ?
   const { data, isLoading, isError, error } = useGetDataQuery();

2. When we mutate our datas, we have to invalidate our previous query to get the new datas. It does make us do more request to our Api, when with the old way, we would have done our PUT request to update our datas and change it ourself in our local store. We would have done a new request only if we refresh our application. Making more request means increasing the cost of our application. Do I miss something ?

Thank you for your time (hoping my english is understandable)

[EskiMojo14]

1. You can use selectFromResult to help your hook decide when to rerender - by default it'll rerender when any of the values in the hook result change.
2. Tag invalidation is the most common method of getting updated data, but manual cache updates are also supported.

[Ronnin1994]

But is there a way to render your component only when the request went through ? Like with react-router-dom, you can use Loader who load your component only after complete the request.

[EskiMojo14]

the request only starts when the component calling the hook is mounted, so no - you can have a wrapper component that makes a request and conditionally requests its children based on that though

[Ronnin1994]

It's what I did, but even with selectFromResult, they're is way too much render of my components. I count 7 just for one mutation. Sounds way to much for every request you might have to do. I'll stick to the old ways I think.
Thank you very much anyway !!

[markerikson]

@Ronnin1994 I would expect pretty similar behavior when you write the code by hand:

• Initial render, no data, not loading yet
• Request gets started by a useEffect, pending action dispatched, re-render with isFetching: true in case you want to show a spinner or other loading state UI
• Request completes, fulfilled action dispatched, re-render with {data, isFetching: false}, and now you render the actual contents

That's going to be the exact same sequence if you wrote the thunks and reducers and effects yourself.

[phryneas]

It's what I did, but even with selectFromResult, they're is way too much render of my components. I count 7 just for one mutation. Sounds way to much for every request you might have to do. I'll stick to the old ways I think.
Thank you very much anyway !!

With selectFromResult you get complete control over how often your component rerenders - you could even make that 0, although it seems useless.

What did you do and what did you want to reach?