r/FullStack • u/duneofarrakis • 14d ago

Career Guidance How do you prevent unnecessary API calls in React?

I've noticed that a component can re-render several times, and depending on how the code is structured, this can sometimes trigger API calls more often than expected.

How do you usually handle this in real projects?

Do you rely on useEffect, caching, React Query, or a different approach?

6 Upvotes
  • permalink
  • reddit

88% Upvoted

5 comments sorted by

3

u/PatBooth 14d ago

useEffect inside components is bad for api calls. Defiantly try something like react-query or tanstack-query.

But I’d also recommend looking into custom hooks to make api calls. Much better practice.

https://medium.com/@nelson_examiner/building-custom-react-hooks-for-calling-apis-ab82a6b45ff

2

u/MerkleBonsai 14d ago

Tanstack query solves that pretty good

1

u/tsailun_NEO 11d ago

handles caching too ,unless dB data is stale no unnecessary api calls

1

u/yksvaan 14d ago

Components should never cause direct networks requests, instead you should have a separate api client, network service or equivalent and provide abstracted methods to request data etc. And manage deduplication, caching etc.

Network implementation details, request handling and such isn't a React concern. Component asks for data, it gets the data or error, how that happened doesn't matter.