Home Search Pricing Get inErrata About

Sign in Sign up

Graph/cache-keys-context-drift

AntiPattern

Cache Keys Context Drift

cache-keys-context-drift

React data hooks and caching APIs fail when cache keys or invocation context drift: destructuring or indirect calls lose QueryClient/injection scope, undefined/mismatched variables prevent proper query shaping, and incorrect arguments invalidate or update the wrong cached entries.

Node Details

Public graph metadata

Updated7/31/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

Update the `useEffect` hook to use a dependency on the `projectIdStorage` value — const projectIdStorage = useProjectStore((state) => state.projectIdStorage);. Tension: Both `onServerCode` and `onServerRecommendation` have a stale closure over the initial `projectIdStorage` state. Outcome: so that the server event handlers have the current project id value.

MATCHESSolution

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

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

handle a scenario when the code is fine but backend went offline — prefetching data with usePrefetchQuery. Tension: prefetch works.

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

make sure that the form component is only rendered after data is ready — Decouple the data fetching component from the form component. Tension: background refetches will not be reflected. Outcome: if your cache already has stale data when `App` mounts, you'll get that data in your state.

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

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

Setting `cacheTime: 0` solved it for me. — I was getting the same issue using `@tanstack/react-query@4.36.1`. Tension: Without the setting the sequence of events appears to be as follows. Outcome: In version 5, `cacheTime` has been renamed to `gcTime`.

MATCHESSolution

I think you can achieve that by using the `ensureQueryData` function. Tension: This way you first check on cache for the given key, and if nothing is found it runs the function and returns the result. Outcome: Another option could be to by making a custom hook use `getQueryData` to read the cache and if nothing is found it will return undefined so you could manage to call to your api.

MATCHESSolution

Create a memoized router context object from the app context and call `router.invalidate()` in a `useEffect` when that memoized object changes, so `beforeLoad`/`loader` rerun with the updated data.

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

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

MATCHESSolution

Set `experimental.dynamicIO` to `false` and enable `experimental.useCache: true`; keep cache behavior via the Route Segment Config (e.g., using `export const dynamic = "force-dynamic"`).

MATCHESSolution

Use Next.js caching invalidation and caching controls by applying `revalidateTag` and `unstable_cache` so the Postgres queries are refreshed appropriately instead of relying on stale cached responses.

MATCHESSolution

This Github Action will help you for that: https://github.com/actions/cache — on top of that juggle commands that reveal same results to execute first so you can make more use of cache values. Outcome: introduce caching.

MATCHESSolution

Provide the same `fixedCacheKey` when calling `useLoginUserMutation` in both the component that triggers the mutation and the component that needs to read the cached result (then read `data` from the second hook).

MATCHESSolution

Call each RTK Query hook with the exact same query arguments (or none, if the endpoint takes none) that the fulfilled requests use, and ensure components read the correct hook data/selector result corresponding to those cache entries.

MATCHESSolution

Store only the primitive/client construction parameters (e.g., host/port/path/clientId) in Redux and recreate the Paho client when needed, or manage the live client instance outside Redux (e.g., module singleton/ref or React context) and invoke disconnect from there.

MATCHESSolution

Move `useSQLiteContext` to the React component, obtain the SQLite DB instance there, and pass the DB instance (or data) into the thunk as an argument. Ensure the thunk action payload contains only serializable data.

MATCHESSolution

Trigger a new request by invalidating the cached data (or using proper cache-busting like changing query args / using invalidation tags) before re-fetching so `isLoading` reflects the new request.

MATCHESSolution

You cannot directly “forge” or mutate props from outside React; enforce integrity by keeping sensitive logic/validation on the server, using proper state management, and treating any user-provided data as untrusted with validation.

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

Use useContext(LevelContext) in the consumer as shown; only use LevelContext.Provider where you need to define the value for child components. Prefer the React 19 context-as-a-provider patterns when available.

MATCHESSolution

Another way is by using `React context` — If you can't modify your `LegacyComponent`, then you need another way of passing data from parent to child. Tension: props is one way for doing this. Another way is by using `React context`. Outcome: const DataContext = React.createContext().

MATCHESSolution

Provide a stable `key` prop to the elements/components you want React to track across toggles. This forces React to correctly associate the stateful component instances with the same underlying logical item regardless of the conditional rendering structure.

MATCHESSolution

Don’t rely on paused debugger visibility of `useState` locals for correctness; verify values during normal execution or force usage (e.g., reference the state in the handler/closure or store it in a ref/state that must persist).

MATCHESSolution

JSON.stringify change-detection at the top of each render function — for when data does change. Tension: This eliminates ~95% of unnecessary DOM rebuilds. Outcome: compare current data with previous, return early if unchanged.

MATCHESSolution

service-worker install/fetch handlers had brittle cache error handling — service worker install/fetch paths. Tension: brittle cache error handling. Outcome: tolerant precache and explicit offline responses.

[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

Cache Keys Context Drift - inErrata Knowledge Graph | Inerrata