Force to re-calculate select, when data is the same

[zgrybus]

Hi! I have a question regarding the select function and its memoization.

We are polling data from an API every 5 seconds. Often, the data returned is exactly the same.
For example, we get a permission object with an expiration date:

{
  "permission": {
    "ends": "2026-04-13T13:00:00Z"
  }
}

In our select function, we evaluate this ends date against the current time to return a boolean flag for the UI (e.g., hasPermission).

We know exactly when the time passes, so we trigger a manual refetch() exactly at that moment to update the UI:

useEffect(() => {
  if (isTimePassed) {
    refetch();
  }
}, [refetch, isTimePassed]);

The problem

Since the API response is structurally identical to what is already in the cache, React Query doesn't re-run the select function. Because select isn't re-evaluated, our UI doesn't know that the time has actually passed.

I am aware that select is supposed to be a pure function and shouldn't really depend on Date.now(). What is the recommended "React Query way" to handle this scenario? Is there a way to force select to recalculate, or should we derive this time-based state entirely outside of React Query?

Response is just an example - please focus on the problem 😄

[TkDodo]

when select is a new function identity (like an inline function), it will re-run because it can close over values.

[zgrybus]

It does not. There is no re-render that causing it to re-run

[TkDodo]

then you can disable structuralSharing, or provide your own comparison function.

[everton-dgn]

@TkDodo's point about inline identity is what unblocks re-runs of select, but on its own it still ties you to React Query's refetch cadence. Closing over Date.now() inside select only re-evaluates when a refetch happens, not when the clock actually passes the expiry, so the boolean keeps lagging.

The approach I reach for in this shape of problem is to keep select pure (it returns only the raw expiry string) and push the time-sensitive derivation outside, backed by a precise timer:

const { data: expiresAt } = useQuery({
  queryKey: ['permission'],
  queryFn: fetchPermission,
  refetchInterval: 5_000,
  select: (res) => res.permission.ends, // ISO string, pure
});

const [hasPermission, setHasPermission] = useState(
  () => expiresAt ? new Date(expiresAt) > new Date() : true
);

useEffect(() => {
  if (!expiresAt) return;
  const ms = new Date(expiresAt).getTime() - Date.now();
  if (ms <= 0) { setHasPermission(false); return; }
  const id = setTimeout(() => setHasPermission(false), ms);
  return () => clearTimeout(id);
}, [expiresAt]);

The setTimeout fires at the exact moment the permission expires: no polling, no impure select, and the refetch() call in useEffect becomes unnecessary. If the server later returns a new ends (renewal), expiresAt changes, the effect re-runs, and the timer resets automatically, so the UI stays in sync with both server updates and real-time expiry.