Client side fetcing

If you fetch in a useEffect

Or you can surround your component with Suspense

and then have a fallback

Can you share some of the code

Like there is one component where we are hitting get api so for 10 items we are fetching 10 times but when I click on some option in sidebar it will go to that route after finishing all 10 api calls

Can I see the component

Try this

It is not working. I want when I click on some button with router.push("") it should go to that route what is happening is it is waiting for all api calls to be finish then it is going to that route

const List = ({ item }: { item: Spaces }) => {

const { apiCalls } = useStore(useRerenderComponent, (state) => state);



const SpaceAssigned = async () => {
if (userRerender === '') {
setLoading(true);
}
try {
const payload = {
space_ids: [item.id],
};
const res = await CustomFetch(spaceAssigned, {
method: 'POST',
body: JSON.stringify(payload),
});
setLoading(false);

setUsers(
res.map(
(UsersItem: SpacesType) => UsersItem.users
// {
// console.log("props.users",UsersItem.users);

// UsersItem.users.filter(
// (users1: UsersAssignedTypes) => !users1.is_organization_user
// )
// }
)
);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
useEffect(() => {
SpaceAssigned();
}, []);


return (<div/>)
export default List

in this if I am having like 10-20 items it is taking so much time to change the route

router.push() is in different component sidebar

can you add syntax highlighting @Northern Pygmy-Owl

Wrap the code in three backticks and then put jsx before the first set of backticks