Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internalize useSyncExternalStore shim, for more control than use-sync-external-store provides #9675

Merged
merged 11 commits into from
May 9, 2022
Prev Previous commit
Next Next commit
Roll our own shim version of useSyncExternalStore.
benjamn committed May 9, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 9c2fb4f7585b825238f66f9c8e48c1a9e3a9c210
2 changes: 1 addition & 1 deletion src/react/hooks/useQuery.ts
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@ import {
useRef,
useState,
} from 'react';
import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
import { useSyncExternalStore } from './useSyncExternalStore';
import { equal } from '@wry/equality';

import { mergeOptions, OperationVariables, WatchQueryFetchPolicy } from '../../core';
113 changes: 113 additions & 0 deletions src/react/hooks/useSyncExternalStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import { invariant } from '../../utilities/globals';
import * as React from 'react';

import { canUseDOM } from '../../utilities';

const ReactWithSESHook = React as (typeof React & {
useSyncExternalStore?: typeof useSyncExternalStore;
});

let didWarnUncachedGetSnapshot = false;

export function useSyncExternalStore<Snapshot>(
subscribe: (onStoreChange: () => void) => () => void,
getSnapshot: () => Snapshot,
getServerSnapshot?: () => Snapshot,
): Snapshot {
// When/if React.useSyncExternalStore is defined, delegate fully to it.
const realHook = ReactWithSESHook.useSyncExternalStore;
if (realHook) {
return realHook(subscribe, getSnapshot, getServerSnapshot);
}

// Read the current snapshot from the store on every render. Again, this
// breaks the rules of React, and only works here because of specific
// implementation details, most importantly that updates are
// always synchronous.
const value = getSnapshot();
if (
__DEV__ &&
!didWarnUncachedGetSnapshot &&
value !== getSnapshot()
) {
didWarnUncachedGetSnapshot = true;
invariant.error(
'The result of getSnapshot should be cached to avoid an infinite loop',
);
}

// Because updates are synchronous, we don't queue them. Instead we force a
// re-render whenever the subscribed state changes by updating an some
// arbitrary useState hook. Then, during render, we call getSnapshot to read
// the current value.
//
// Because we don't actually use the state returned by the useState hook, we
// can save a bit of memory by storing other stuff in that slot.
//
// To implement the early bailout, we need to track some things on a mutable
// object. Usually, we would put that in a useRef hook, but we can stash it in
// our useState hook instead.
//
// To force a re-render, we call forceUpdate({inst}). That works because the
// new object always fails an equality check.
const [{inst}, forceUpdate] = React.useState({inst: {value, getSnapshot}});

// Track the latest getSnapshot function with a ref. This needs to be updated
// in the layout phase so we can access it during the tearing check that
// happens on subscribe.
if (canUseDOM) {
React.useLayoutEffect(() => {
Object.assign(inst, { value, getSnapshot });
// Whenever getSnapshot or subscribe changes, we need to check in the
// commit phase if there was an interleaved mutation. In concurrent mode
// this can happen all the time, but even in synchronous mode, an earlier
// effect may have mutated the store.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceUpdate({inst});
}
}, [subscribe, value, getSnapshot]);
} else {
Object.assign(inst, { value, getSnapshot });
}

React.useEffect(() => {
// Check for changes right before subscribing. Subsequent changes will be
// detected in the subscription handler.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceUpdate({inst});
}
const handleStoreChange = () => {
// TODO: Because there is no cross-renderer API for batching updates, it's
// up to the consumer of this library to wrap their subscription event
// with unstable_batchedUpdates. Should we try to detect when this isn't
// the case and print a warning in development?

// The store changed. Check if the snapshot changed since the last time we
// read from the store.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceUpdate({inst});
}
};
// Subscribe to the store and return a clean-up function.
return subscribe(handleStoreChange);
}, [subscribe]);

return value;
}

function checkIfSnapshotChanged<Snapshot>({
value,
getSnapshot,
}: {
value: Snapshot;
getSnapshot: () => Snapshot;
}): boolean {
try {
return value !== getSnapshot();
} catch {
return true;
}
}