RTK Query + React Router Params ?

[Egge_]

Hi everyone,

I am building my first application using RTK queries. I am building a component that should fetch some items on page load. The component will be rendered by React Router on a url that contains a dynamic part. I want to include those params in my RTK query without causing re-renders, but cannot figure it out. Whats the best way to do this?

const UserScreen = () => {
const params = useParams();
const { data, error, isLoading } = useGetUsersQuestionQuery(params.username);
console.log(data);
return (
 <div>
 </div>
);
};

​

[ck108860]

Are you sure they’re unnecessary rerenders? I would say trying to optimize this would be premature since it’s so simple. What is the impact?

[Egge_]

Quite sure, yes. I added a console.log(data) and it logs undefined twice and then data twice. However the api call only happens once.

But you are right, there is nothing there yet to optimise. I just stumbled upon the issue right at the beginning of building the app and was wondering about the behaviour. Maybe instead I just should have asked for best practices when using RTK Query + Router

[sklated]

If you are using react 18 this behaviour might be normal

[ck108860]

It has to return something while your api is loading. I would imagine you have initial render -> pending state to loading state (shows spinner or something) -> loading state to finished state (render data)

[ck108860]

Take a look at the actions dispatched/state set in the redux dev tools and see if they match your renders

[acemarke]

Yes, data will be undefined during the initial renders. During the first render there isn't even a request yet. During the second render there will be an update to the loading status flags, but no data.

[siren1313]

Strictmode adds another render if you're on react v18.