Skip to content

preact-query's HydrationBoundary still hydrates existing queries in a passive effect, same race #11137 fixed for react-query #11155

Description

@MILLERMARRU

react-query's HydrationBoundary just got fixed in #11137 to hydrate existingQueries (data for queries that are already in the cache and remounting) in a layout effect instead of a passive useEffect, since a remounting useQuery can subscribe and read the stale cached data before a passive effect runs, kicking off a refetch for data the dehydrated state already had.

packages/preact-query/src/HydrationBoundary.tsx has basically the same structure (same useMemo splitting new vs existing queries, same hydration queue) but still uses plain useEffect from preact/hooks for the final hydration:

useEffect(() => {
  if (hydrationQueue) {
    hydrate(client, { queries: hydrationQueue }, optionsRef.current)
  }
}, [client, hydrationQueue])

Checked Preact's docs and useLayoutEffect from preact/hooks has the same semantics as React's version, runs synchronously after DOM mutations and before paint, so the same fix should carry over directly. isServer is already exported from @tanstack/query-core, which preact-query already imports hydrate from, so building the same isomorphic layout effect (isServer ? useEffect : useLayoutEffect) shouldn't need anything new.

Not sure if this was left out of #11137 on purpose (maybe preact-query gets less attention and just hasn't caught up yet) or just missed since it's a separate package, wanted to flag it either way since the race it fixes doesn't seem preact-specific at all.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions