Skip to content

Check for store mutations before commit #22290

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Sep 13, 2021
Merged

Check for store mutations before commit #22290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ead7e6f
[useSyncExternalStore] Remove extra hook object
acdlite Sep 7, 2021
5265775
Split shouldTimeSlice into two separate functions
acdlite Sep 10, 2021
6ca37ef
Check for store mutations before commit
acdlite Sep 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion packages/react-debug-tools/src/ReactDebugHooks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,6 @@ function useSyncExternalStore<T>(
// Advance the current hook index the same number of times
// so that subsequent hooks have the right memoized state.
nextHook(); // SyncExternalStore
nextHook(); // LayoutEffect
nextHook(); // Effect
const value = getSnapshot();
hookLog.push({
Expand Down
54 changes: 28 additions & 26 deletions packages/react-reconciler/src/ReactFiberFlags.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,51 +12,53 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
export type Flags = number;

// Don't change these two values. They're used by React Dev Tools.
export const NoFlags = /* */ 0b00000000000000000000000;
export const PerformedWork = /* */ 0b00000000000000000000001;
export const NoFlags = /* */ 0b000000000000000000000000;
export const PerformedWork = /* */ 0b000000000000000000000001;

// You can change the rest (and add more).
export const Placement = /* */ 0b00000000000000000000010;
export const Update = /* */ 0b00000000000000000000100;
export const Placement = /* */ 0b000000000000000000000010;
export const Update = /* */ 0b000000000000000000000100;
export const PlacementAndUpdate = /* */ Placement | Update;
export const Deletion = /* */ 0b00000000000000000001000;
export const ChildDeletion = /* */ 0b00000000000000000010000;
export const ContentReset = /* */ 0b00000000000000000100000;
export const Callback = /* */ 0b00000000000000001000000;
export const DidCapture = /* */ 0b00000000000000010000000;
export const Ref = /* */ 0b00000000000000100000000;
export const Snapshot = /* */ 0b00000000000001000000000;
export const Passive = /* */ 0b00000000000010000000000;
export const Hydrating = /* */ 0b00000000000100000000000;
export const Deletion = /* */ 0b000000000000000000001000;
export const ChildDeletion = /* */ 0b000000000000000000010000;
export const ContentReset = /* */ 0b000000000000000000100000;
export const Callback = /* */ 0b000000000000000001000000;
export const DidCapture = /* */ 0b000000000000000010000000;
export const Ref = /* */ 0b000000000000000100000000;
export const Snapshot = /* */ 0b000000000000001000000000;
export const Passive = /* */ 0b000000000000010000000000;
export const Hydrating = /* */ 0b000000000000100000000000;
export const HydratingAndUpdate = /* */ Hydrating | Update;
export const Visibility = /* */ 0b00000000001000000000000;
export const Visibility = /* */ 0b000000000001000000000000;
export const StoreConsistency = /* */ 0b000000000010000000000000;

export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
export const LifecycleEffectMask =
Passive | Update | Callback | Ref | Snapshot | StoreConsistency;

// Union of all commit flags (flags with the lifetime of a particular commit)
export const HostEffectMask = /* */ 0b00000000001111111111111;
export const HostEffectMask = /* */ 0b000000000011111111111111;

// These are not really side effects, but we still reuse this field.
export const Incomplete = /* */ 0b00000000010000000000000;
export const ShouldCapture = /* */ 0b00000000100000000000000;
export const ForceUpdateForLegacySuspense = /* */ 0b00000001000000000000000;
export const DidPropagateContext = /* */ 0b00000010000000000000000;
export const NeedsPropagation = /* */ 0b00000100000000000000000;
export const Incomplete = /* */ 0b000000000100000000000000;
export const ShouldCapture = /* */ 0b000000001000000000000000;
export const ForceUpdateForLegacySuspense = /* */ 0b000000010000000000000000;
export const DidPropagateContext = /* */ 0b000000100000000000000000;
export const NeedsPropagation = /* */ 0b000001000000000000000000;

// Static tags describe aspects of a fiber that are not specific to a render,
// e.g. a fiber uses a passive effect (even if there are no updates on this particular render).
// This enables us to defer more work in the unmount case,
// since we can defer traversing the tree during layout to look for Passive effects,
// and instead rely on the static flag as a signal that there may be cleanup work.
export const RefStatic = /* */ 0b00001000000000000000000;
export const LayoutStatic = /* */ 0b00010000000000000000000;
export const PassiveStatic = /* */ 0b00100000000000000000000;
export const RefStatic = /* */ 0b000010000000000000000000;
export const LayoutStatic = /* */ 0b000100000000000000000000;
export const PassiveStatic = /* */ 0b001000000000000000000000;

// These flags allow us to traverse to fibers that have effects on mount
// without traversing the entire tree after every commit for
// double invoking
export const MountLayoutDev = /* */ 0b01000000000000000000000;
export const MountPassiveDev = /* */ 0b10000000000000000000000;
export const MountLayoutDev = /* */ 0b010000000000000000000000;
export const MountPassiveDev = /* */ 0b100000000000000000000000;

// Groups of flags that are used in the commit phase to skip over trees that
// don't contain effects, by checking subtreeFlags.
Expand Down
185 changes: 136 additions & 49 deletions packages/react-reconciler/src/ReactFiberHooks.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import {
SyncLane,
NoLanes,
isSubsetOfLanes,
includesBlockingLane,
mergeLanes,
removeLanes,
intersectLanes,
Expand All @@ -68,6 +69,7 @@ import {
PassiveStatic as PassiveStaticEffect,
StaticMask as StaticMaskEffect,
Update as UpdateEffect,
StoreConsistency,
} from './ReactFiberFlags';
import {
HasEffect as HookHasEffect,
Expand Down Expand Up @@ -166,7 +168,15 @@ type StoreInstance<T> = {|
getSnapshot: () => T,
|};

export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};
type StoreConsistencyCheck<T> = {|
value: T,
getSnapshot: () => T,
|};

export type FunctionComponentUpdateQueue = {|
lastEffect: Effect | null,
stores: Array<StoreConsistencyCheck<any>> | null,
|};

type BasicStateAction<S> = (S => S) | S;

Expand Down Expand Up @@ -689,6 +699,7 @@ function updateWorkInProgressHook(): Hook {
function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
return {
lastEffect: null,
stores: null,
};
}

Expand Down Expand Up @@ -1256,6 +1267,7 @@ function mountSyncExternalStore<T>(
subscribe: (() => void) => () => void,
getSnapshot: () => T,
): T {
const fiber = currentlyRenderingFiber;
const hook = mountWorkInProgressHook();
// Read the current snapshot from the store on every render. This breaks the
// normal rules of React, and only works because store updates are
Expand All @@ -1277,13 +1289,45 @@ function mountSyncExternalStore<T>(
getSnapshot,
};
hook.queue = inst;
return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);

// Schedule an effect to subscribe to the store.
mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);

// Schedule an effect to update the mutable instance fields. We will update
// this whenever subscribe, getSnapshot, or value changes. Because there's no
// clean-up function, and we track the deps correctly, we can call pushEffect
// directly, without storing any additional state. For the same reason, we
// don't need to set a static flag, either.
// TODO: We can move this to the passive phase once we add a pre-commit
// consistency check. See the next comment.
fiber.flags |= PassiveEffect;
pushEffect(
HookHasEffect | HookPassive,
updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
undefined,
null,
);

// Unless we're rendering a blocking lane, schedule a consistency check. Right
// before committing, we will walk the tree and check if any of the stores
// were mutated.
const root: FiberRoot | null = getWorkInProgressRoot();
invariant(
root !== null,
'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
);
if (!includesBlockingLane(root, renderLanes)) {
pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
}

return nextSnapshot;
}

function updateSyncExternalStore<T>(
subscribe: (() => void) => () => void,
getSnapshot: () => T,
): T {
const fiber = currentlyRenderingFiber;
const hook = updateWorkInProgressHook();
// Read the current snapshot from the store on every render. This breaks the
// normal rules of React, and only works because store updates are
Expand All @@ -1300,66 +1344,109 @@ function updateSyncExternalStore<T>(
}
}
const prevSnapshot = hook.memoizedState;
if (!is(prevSnapshot, nextSnapshot)) {
const snapshotChanged = !is(prevSnapshot, nextSnapshot);
if (snapshotChanged) {
hook.memoizedState = nextSnapshot;
markWorkInProgressReceivedUpdate();
}
const inst = hook.queue;
return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);

updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [
subscribe,
]);

// 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 (
inst.getSnapshot !== getSnapshot ||
snapshotChanged ||
// Check if the susbcribe function changed. We can save some memory by
// checking whether we scheduled a subscription effect above.
(workInProgressHook !== null &&
workInProgressHook.memoizedState.tag & HookHasEffect)
) {
fiber.flags |= PassiveEffect;
pushEffect(
HookHasEffect | HookPassive,
updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
undefined,
null,
);

// Unless we're rendering a blocking lane, schedule a consistency check.
// Right before committing, we will walk the tree and check if any of the
// stores were mutated.
const root: FiberRoot | null = getWorkInProgressRoot();
invariant(
root !== null,
'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
);
if (!includesBlockingLane(root, renderLanes)) {
pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
}
}

return nextSnapshot;
}

function useSyncExternalStore<T>(
hook: Hook,
inst: StoreInstance<T>,
subscribe: (() => void) => () => void,
function pushStoreConsistencyCheck<T>(
fiber: Fiber,
getSnapshot: () => T,
renderedSnapshot: T,
) {
fiber.flags |= StoreConsistency;
const check: StoreConsistencyCheck<T> = {
getSnapshot,
value: renderedSnapshot,
};
let componentUpdateQueue: null | FunctionComponentUpdateQueue = (currentlyRenderingFiber.updateQueue: any);
if (componentUpdateQueue === null) {
componentUpdateQueue = createFunctionComponentUpdateQueue();
currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);
componentUpdateQueue.stores = [check];
} else {
const stores = componentUpdateQueue.stores;
if (stores === null) {
componentUpdateQueue.stores = [check];
} else {
stores.push(check);
}
}
}

function updateStoreInstance<T>(
fiber: Fiber,
inst: StoreInstance<T>,
nextSnapshot: T,
): T {
const fiber = currentlyRenderingFiber;
const dispatcher = ReactCurrentDispatcher.current;
getSnapshot: () => T,
) {
// These are updated in the passive phase
inst.value = nextSnapshot;
inst.getSnapshot = getSnapshot;

// Something may have been mutated in between render and commit. This could
// have been in an event that fired before the passive effects, or it could
// have been in a layout effect. In that case, we would have used the old
// snapsho and getSnapshot values to bail out. We need to check one more time.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceStoreRerender(fiber);
}
}

// 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.
// TODO: Circumvent SSR warning
dispatcher.useLayoutEffect(() => {
inst.value = nextSnapshot;
inst.getSnapshot = 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.
// TODO: Move the tearing checks to an earlier, pre-commit phase so that the
// layout effects always observe a consistent tree.
function subscribeToStore(fiber, inst, subscribe) {
const handleStoreChange = () => {
// The store changed. Check if the snapshot changed since the last time we
// read from the store.
if (checkIfSnapshotChanged(inst)) {
// Force a re-render.
forceStoreRerender(fiber);
}
}, [subscribe, nextSnapshot, getSnapshot]);

dispatcher.useEffect(() => {
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.
forceStoreRerender(fiber);
}
};
// Check for changes right before subscribing. Subsequent changes will be
// detected in the subscription handler.
handleStoreChange();
// Subscribe to the store and return a clean-up function.
return subscribe(handleStoreChange);
}, [subscribe]);

return nextSnapshot;
};
// Subscribe to the store and return a clean-up function.
return subscribe(handleStoreChange);
}

function checkIfSnapshotChanged(inst) {
Expand Down
Loading