#443 useSyncEffect Breaks useFind Reactivity Under Suspense

[welkinwong]

In the client-side implementation of suspense/useFind, useFindClient is used.
PR #433 introduced useSyncEffect, which sets a 1000ms timeout.

const useSyncEffect = (effect, deps) => {
  const [cleanup, timeoutId] = useMemo(
    () => {
      const cleanup = effect();
      const timeoutId = setTimeout(cleanup, 1000);
                                     ↖︎here
      return [cleanup, timeoutId];
    },
    deps
  );

  useEffect(() => {
    clearTimeout(timeoutId);

    return cleanup;
  }, [cleanup]);
};

When used with Suspense, if code after useFindClient (e.g., the Suspense-compatible useSubscribe) throws a promise and triggers Suspense fallback:

1. The useEffect inside useSyncEffect is not called (due to rendering being suspended),
2. But the 1000ms timeout remains active in the background.

Once Suspense resolves the promise and re-renders the component (typically in <1000ms), the timeout fires after re-rendering, triggering its cleanup logic. This prematurely terminates useFind's reactivity

[welkinwong]

This behavior is similar to other Suspense-compatible hooks that require external caching to properly handle cleanup after Suspense resolves. In my opinion, we should:

1. Implement a standalone client-side version of suspense/useFind
2. Remove its dependency on useFindClient
3. Keep the non-Suspense version of useFind separate, as it shouldn't need to account for these edge cases

Share your thoughts

[welkinwong]

Through the test cases, I discovered that my initial understanding was mistaken. This problem is associated with strict mode. I will create a new issue to address this.