When to Avoid React Query in React
React Query (TanStack Query) is an industry-standard library for managing server state in React applications, but it is not a silver bullet for every project. While it excels at caching, background updating, and synchronizing asynchronous data, there are several scenarios where incorporating it adds unnecessary complexity and bundle size. This article outlines the specific situations where you should avoid using React Query and choose simpler alternatives instead.
1. You Only Have Simple or Minimal Data Fetching
If your application only makes a few simple API calls that do not
require caching, background updates, or pagination, React Query is
overkill. For basic applications, a standard fetch call
inside a useEffect hook or a lightweight custom hook is
sufficient. Implementing React Query in these cases introduces
unnecessary boilerplate and learning overhead for your team.
2. You Need to Manage Local UI State
React Query is strictly a server state management tool. It
is designed to handle data that lives on a database or external server.
If you need to manage local client-side state—such as whether a modal is
open, the current theme, or form inputs—React Query is the wrong tool.
Instead, use native React features like useState and
useContext, or client-side state libraries like Zustand,
Redux, or Recoil.
3. You Are Using Modern Next.js (React Server Components)
With the introduction of React Server Components (RSC) in frameworks like Next.js, data fetching can now happen directly on the server. If your application relies heavily on server-rendered pages where data is fetched during the request lifecycle and passed down as static props, React Query’s client-side caching mechanism becomes redundant. Unless you require frequent client-side refetching, polling, or complex mutations, the native server-side fetching capabilities of your framework are preferred.
4. You Have Strict Bundle Size Constraints
React Query is a robust library with a rich feature set, but this functionality comes with a cost to your bundle size. If you are building a lightweight widget, a landing page, or an application optimized for low-bandwidth devices, adding React Query may negatively impact performance. In these scenarios, native fetch or smaller alternatives like SWR (which is significantly lighter) are better choices.
5. Your App Relies Entirely on WebSockets or Real-Time Streams
While React Query can be integrated with WebSockets, it is fundamentally designed around a request-response (pull-based) model. If your application’s data flow is entirely event-driven and relies on constant, real-time push streams (such as a collaborative editing tool or a high-frequency trading dashboard), dedicated streaming architectures or libraries like RxJS and native WebSocket wrappers will serve you better.