Home Search Pricing Get inErrata About

Sign in Sign up

Graph/react-query-hook-misuse

AntiPattern

React Query Hook Misuse

react-query-hook-misuse

React Query hooks get misused—undefined initial data, Suspense server-fetch without client hydration, and context-free QueryClient methods—causing type issues, missing/invisible data, and confusing observable counts when components expect different semantics.

Node Details

Public graph metadata

Updated6/23/2026

Connections

30 linked nodes

MATCHESSolution

Leverage React 18's `useSyncExternalStore` — ensure consistent state between SSR and CSR. Tension: client-side state doesn't sync properly with the server-rendered state. Outcome: to ensure consistent state between SSR and CSR.

MATCHESSolution

Refactor so that hooks are called only inside the custom hook or at the component level, and return plain functions that do not call hooks (e.g., compute/set needed state without invoking hooks in the returned callback). Alternatively restructure the custom hook to expose non-hook handlers or move the hook invocation to component initialization and pass the resulting setters.

MATCHESSolution

Create/move the React.lazy import initialization so it isn’t executed on every render (e.g., place the lazy call in the same component as Suspense) to ensure the import is stable and doesn’t trigger repeated re-renders.

MATCHESSolution

Just make your component a Client Component — React hooks work only in Client Components.

MATCHESSolution

Treat `use client` as enabling client interactivity rather than killing SSR: the provider can wrap the app while still allowing server-side rendering of the initial output, and server components can be passed into client components as props.

MATCHESSolution

Instead of `useRef`, we can change it to `useState` — for a DOM node that may not exist or change during the component's render. Tension: so that we can track ref changes in the state and trigger re-renders as needed.

MATCHESSolution

You should really use tag validation to trigger your query endpoints to refetch upon any successful mutation. — onSuccess: async () => { await queryClient.invalidateQueries({ queryKey: ["vehicle.getVehiclesWithMakes"],. Tension: Both are less than ideal. Outcome: await queryClient.invalidateQueries({ queryKey: ["vehicle.getVehiclesWithMakes"], // <-- invalidates tag key });.

MATCHESSolution

Checkout react-query documentation - https://tanstack.com/query/latest/docs/framework/react/guides/suspense#suspense-on-the-server-with-streaming — with suspense on server side. Tension: this working with suspense on server side. Outcome: there is a provision to get this working with suspense on server side.

MATCHESSolution

Use a global or local state to control the DnD UI, then sync that state with React Query data and update the server on drag end

MATCHESSolution

With useQuery you have an initialData ! — useQuery({ queryFn: () => getTodos(), queryKey: todoKeys.lists(), initialData: [] }). Tension: your data will not be undefined. Outcome: With this your data will not be undefined.

MATCHESSolution

useQuery has enabled option. Rewrite your custom hook like this: — return useQuery({. Outcome: enabled,.

MATCHESSolution

I try putting a setName(data.name) inside a useEffect that runs only when "isLoading" changes, and it works — edit/change the "name" retrieved by the query. Tension: I would think there is a better and more clean way to do it. Outcome: use a `useEffect` hook to "synchronize" a React state to an external source.

MATCHESSolution

An alternative would be to lift the query up higher in the ReactTree — conditionally render the child component with the fetched `name` as a prop. Tension: useState(props.name).

MATCHESSolution

Tension: despite that being what the react-query docs suggested. Outcome: This solved the type errors too.

MATCHESSolution

Update to pass the fetching function as the mutation's `mutationFn` property. — `const { mutate } = useMutation({ mutationFn: (title) => axios.post("/api/posts/addPost", { title }),. Tension: The current V5 React-Query useMutation hook consumes an options object, not an asynchronous function. Outcome: const { mutate } = useMutation({ mutationFn: (title) => axios.post("/api/posts/addPost", { title }), onSuccess: (data) => { console.log('Post added successfully:', data); }, onError: (error) => { console.error('Error adding post:', error); }, });.

MATCHESSolution

In short, `initialData` goes straight to the cache, while `placeholderData` is something that is only returned for the component instance using it — React Query v5 useQuery hook. Tension: `placeholderData` is not real, so the Query will behave as if it were in `pending` state. Outcome: That influences how refetches are done, and what happens to that data if the query goes into error state.

MATCHESSolution

Call `trpc...useQuery` at the component top level, destructure `{ data }`, and then use `useEffect` (or derived rendering) to react to changes in `data`. Optionally control execution with query options (e.g., enabling based on `activeChildId`) instead of wrapping the hook call in `useEffect`.

MATCHESSolution

Try to add `initialPageParam: 1,` — using "useInfiniteQuery" with React. Tension: the `initialData` could be removed, I suppose. Outcome: Try to add `initialPageParam: 1,` And the `initialData` could be removed, I suppose.

MATCHESSolution

setQueryData(['todo', todo.id], todo) — any child components that need to render that data can just get the Todo object from the react-query cache. Tension: with only the `id` field being passed as a prop. Outcome: Then any child components that need to render that data can just get the Todo object from the react-query cache.

MATCHESSolution

rendering the rows as a non complex component like a spinner or something — my laggy components were loading in as i scrolled etc. Tension: excessive blanking of the page. Outcome: using useEffect to determine if it is fully rendered, you can resolve most of the major blanking issues.

MATCHESSolution

return response.data; — queryFn: async () => { const response = await fetchMaterial();. Tension: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components.

MATCHESSolution

use the query in script setup but as not enabled so that it does not start fetching right away — to run it in click handler. Tension: vue-query can only be called from setup function only. Outcome: then use `refetch` method to run it in click handler.

MATCHESSolution

Align Tanstack Query package versions per the official React Query SSR/Next.js guide and use the correct SSR hydration components (Hydrate/DehydratedState/QueryClientProvider) as shown in the documentation.

MATCHESSolution

Your back end can use other services including REST-based ones — Making both styles of requests from your front-end is just messy. Tension: react-query can tie to both REST and GraphQL APIs but that's messy. Outcome: It would be cleaner if your back-end and front-end communicated exclusively using GraphQL.

MATCHESSolution

Wrap you components that rely on React Query data — React Query data. Outcome: with Suspense and HydrationBoundary.

MATCHESSolution

Use React.useMemo to create the parameterized selector, or use the generated useGetAccountsQuery hook directly.

MATCHESSolution

Annotate the exported hooks with TypedUseQuery instead of relying on the inferred hook type

MATCHESSolution

There isn't any `getData` endpoint declared so there will not be any `useGetDataQuery` hook generated. — export const { useGetDataQuery } = apiSlice;. Tension: only `useGetWines-X` hooks will be generated. Outcome: export const { useGetWinesQuery } = apiSlice;.

MATCHESSolution

`useCallback` needs to be used — to be used as a callback and thus prevent the unnecessary re-renders. Tension: `memo` can't prevent `ExpensiveComponent` from being re-rendered. Outcome: const handleRender = useCallback(() => {...}, []);.

MATCHESSolution

Call all hooks unconditionally at the top of the component (e.g., move useParams() above the ready/user checks) and only render conditional UI afterward; optionally use nested routes for subpages instead of relying on conditional logic.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata