Skip to content

Commit 5227a37

Browse files
author
Brian Vaughn
authored
Add "unstable_" prefix to experimental mutable source APIs (facebook#19472)
* Add "unstbale_" prefix to mutable source APIs * DebugHooks no longer calls useMutableSource() on init This was causing an observable behavioral difference between experimental DEV and PROD builds. We don't initialize stack position for other composite hooks (e.g. useDeferredValue, useTransition, useOpaqueIdentifier). If we did, it would cause the same obesrvable behavioral difference.
1 parent 52c5146 commit 5227a37

File tree

8 files changed

+76
-63
lines changed

8 files changed

+76
-63
lines changed

‎packages/react-debug-tools/src/ReactDebugHooks.js

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,6 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
8686
Dispatcher.useDebugValue(null);
8787
Dispatcher.useCallback(() => {});
8888
Dispatcher.useMemo(() => null);
89-
Dispatcher.useMutableSource(
90-
{
91-
_source: {},
92-
_getVersion: () => 1,
93-
_workInProgressVersionPrimary: null,
94-
_workInProgressVersionSecondary: null,
95-
},
96-
() => null,
97-
() => () => {},
98-
);
9989
} finally {
10090
readHookLog = hookLog;
10191
hookLog = [];

‎packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -848,9 +848,9 @@ describe('ReactHooksInspectionIntegration', () => {
848848

849849
if (__EXPERIMENTAL__) {
850850
it('should support composite useMutableSource hook', () => {
851-
const mutableSource = React.createMutableSource({}, () => 1);
851+
const mutableSource = React.unstable_createMutableSource({}, () => 1);
852852
function Foo(props) {
853-
React.useMutableSource(
853+
React.unstable_useMutableSource(
854854
mutableSource,
855855
() => 'snapshot',
856856
() => {},

‎packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js

Lines changed: 58 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ let React;
1616
let ReactFeatureFlags;
1717
let ReactNoop;
1818
let Scheduler;
19-
let useMutableSource;
2019
let act;
20+
let createMutableSource;
21+
let useMutableSource;
2122

2223
function loadModules() {
2324
jest.resetModules();
@@ -30,8 +31,9 @@ function loadModules() {
3031
React = require('react');
3132
ReactNoop = require('react-noop-renderer');
3233
Scheduler = require('scheduler');
33-
useMutableSource = React.useMutableSource;
3434
act = ReactNoop.act;
35+
createMutableSource = React.unstable_createMutableSource;
36+
useMutableSource = React.unstable_useMutableSource;
3537
}
3638

3739
describe('useMutableSource', () => {
@@ -129,10 +131,6 @@ describe('useMutableSource', () => {
129131
};
130132
}
131133

132-
function createMutableSource(source) {
133-
return React.createMutableSource(source, param => param.version);
134-
}
135-
136134
function Component({getSnapshot, label, mutableSource, subscribe}) {
137135
const snapshot = useMutableSource(mutableSource, getSnapshot, subscribe);
138136
Scheduler.unstable_yieldValue(`${label}:${snapshot}`);
@@ -144,7 +142,7 @@ describe('useMutableSource', () => {
144142
// @gate experimental
145143
it('should subscribe to a source and schedule updates when it changes', () => {
146144
const source = createSource('one');
147-
const mutableSource = createMutableSource(source);
145+
const mutableSource = createMutableSource(source, param => param.version);
148146

149147
act(() => {
150148
ReactNoop.renderToRootWithID(
@@ -212,7 +210,7 @@ describe('useMutableSource', () => {
212210
// @gate experimental
213211
it('should restart work if a new source is mutated during render', () => {
214212
const source = createSource('one');
215-
const mutableSource = createMutableSource(source);
213+
const mutableSource = createMutableSource(source, param => param.version);
216214

217215
act(() => {
218216
ReactNoop.render(
@@ -247,7 +245,7 @@ describe('useMutableSource', () => {
247245
// @gate experimental
248246
it('should schedule an update if a new source is mutated between render and commit (subscription)', () => {
249247
const source = createSource('one');
250-
const mutableSource = createMutableSource(source);
248+
const mutableSource = createMutableSource(source, param => param.version);
251249

252250
act(() => {
253251
ReactNoop.render(
@@ -287,10 +285,16 @@ describe('useMutableSource', () => {
287285
// @gate experimental
288286
it('should unsubscribe and resubscribe if a new source is used', () => {
289287
const sourceA = createSource('a-one');
290-
const mutableSourceA = createMutableSource(sourceA);
288+
const mutableSourceA = createMutableSource(
289+
sourceA,
290+
param => param.versionA,
291+
);
291292

292293
const sourceB = createSource('b-one');
293-
const mutableSourceB = createMutableSource(sourceB);
294+
const mutableSourceB = createMutableSource(
295+
sourceB,
296+
param => param.versionB,
297+
);
294298

295299
act(() => {
296300
ReactNoop.render(
@@ -338,7 +342,7 @@ describe('useMutableSource', () => {
338342
// @gate experimental
339343
it('should unsubscribe and resubscribe if a new subscribe function is provided', () => {
340344
const source = createSource('a-one');
341-
const mutableSource = createMutableSource(source);
345+
const mutableSource = createMutableSource(source, param => param.version);
342346

343347
const unsubscribeA = jest.fn();
344348
const subscribeA = jest.fn(s => {
@@ -403,7 +407,7 @@ describe('useMutableSource', () => {
403407
// @gate experimental
404408
it('should re-use previously read snapshot value when reading is unsafe', () => {
405409
const source = createSource('one');
406-
const mutableSource = createMutableSource(source);
410+
const mutableSource = createMutableSource(source, param => param.version);
407411

408412
act(() => {
409413
ReactNoop.render(
@@ -460,7 +464,7 @@ describe('useMutableSource', () => {
460464
// @gate experimental
461465
it('should read from source on newly mounted subtree if no pending updates are scheduled for source', () => {
462466
const source = createSource('one');
463-
const mutableSource = createMutableSource(source);
467+
const mutableSource = createMutableSource(source, param => param.version);
464468

465469
act(() => {
466470
ReactNoop.render(
@@ -500,7 +504,7 @@ describe('useMutableSource', () => {
500504
// @gate experimental
501505
it('should throw and restart render if source and snapshot are unavailable during an update', () => {
502506
const source = createSource('one');
503-
const mutableSource = createMutableSource(source);
507+
const mutableSource = createMutableSource(source, param => param.version);
504508

505509
act(() => {
506510
ReactNoop.render(
@@ -567,7 +571,7 @@ describe('useMutableSource', () => {
567571
// @gate experimental
568572
it('should throw and restart render if source and snapshot are unavailable during a sync update', () => {
569573
const source = createSource('one');
570-
const mutableSource = createMutableSource(source);
574+
const mutableSource = createMutableSource(source, param => param.version);
571575

572576
act(() => {
573577
ReactNoop.render(
@@ -631,7 +635,7 @@ describe('useMutableSource', () => {
631635
// @gate experimental
632636
it('should only update components whose subscriptions fire', () => {
633637
const source = createComplexSource('a:one', 'b:one');
634-
const mutableSource = createMutableSource(source);
638+
const mutableSource = createMutableSource(source, param => param.version);
635639

636640
// Subscribe to part of the store.
637641
const getSnapshotA = s => s.valueA;
@@ -670,7 +674,7 @@ describe('useMutableSource', () => {
670674
// @gate experimental
671675
it('should detect tearing in part of the store not yet subscribed to', () => {
672676
const source = createComplexSource('a:one', 'b:one');
673-
const mutableSource = createMutableSource(source);
677+
const mutableSource = createMutableSource(source, param => param.version);
674678

675679
// Subscribe to part of the store.
676680
const getSnapshotA = s => s.valueA;
@@ -737,7 +741,7 @@ describe('useMutableSource', () => {
737741
const MockComponent = jest.fn(Component);
738742

739743
const source = createSource('one');
740-
const mutableSource = createMutableSource(source);
744+
const mutableSource = createMutableSource(source, param => param.version);
741745

742746
act(() => {
743747
ReactNoop.render(
@@ -762,7 +766,7 @@ describe('useMutableSource', () => {
762766
// @gate experimental
763767
it('should throw and restart if getSnapshot changes between scheduled update and re-render', () => {
764768
const source = createSource('one');
765-
const mutableSource = createMutableSource(source);
769+
const mutableSource = createMutableSource(source, param => param.version);
766770

767771
const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
768772

@@ -808,7 +812,7 @@ describe('useMutableSource', () => {
808812
// @gate experimental
809813
it('should recover from a mutation during yield when other work is scheduled', () => {
810814
const source = createSource('one');
811-
const mutableSource = createMutableSource(source);
815+
const mutableSource = createMutableSource(source, param => param.version);
812816

813817
act(() => {
814818
// Start a render that uses the mutable source.
@@ -842,7 +846,7 @@ describe('useMutableSource', () => {
842846
// @gate experimental
843847
it('should not throw if the new getSnapshot returns the same snapshot value', () => {
844848
const source = createSource('one');
845-
const mutableSource = createMutableSource(source);
849+
const mutableSource = createMutableSource(source, param => param.version);
846850

847851
const onRenderA = jest.fn();
848852
const onRenderB = jest.fn();
@@ -897,7 +901,7 @@ describe('useMutableSource', () => {
897901
// @gate experimental
898902
it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
899903
const source = createSource('one');
900-
const mutableSource = createMutableSource(source);
904+
const mutableSource = createMutableSource(source, param => param.version);
901905

902906
const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
903907

@@ -942,7 +946,7 @@ describe('useMutableSource', () => {
942946
{id: 2, name: 'Bar'},
943947
],
944948
});
945-
const mutableSource = createMutableSource(source);
949+
const mutableSource = createMutableSource(source, param => param.version);
946950

947951
function FriendsList() {
948952
const getSnapshot = React.useCallback(
@@ -1004,7 +1008,7 @@ describe('useMutableSource', () => {
10041008
// @gate experimental
10051009
it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
10061010
const source = createSource('one');
1007-
const mutableSource = createMutableSource(source);
1011+
const mutableSource = createMutableSource(source, param => param.version);
10081012

10091013
function Wrapper() {
10101014
React.useLayoutEffect(() => () => {
@@ -1044,7 +1048,7 @@ describe('useMutableSource', () => {
10441048
a: 'initial',
10451049
b: 'initial',
10461050
});
1047-
const mutableSource = createMutableSource(source);
1051+
const mutableSource = createMutableSource(source, param => param.version);
10481052

10491053
const getSnapshotA = () => source.value.a;
10501054
const getSnapshotB = () => source.value.b;
@@ -1089,7 +1093,7 @@ describe('useMutableSource', () => {
10891093
a: 'initial',
10901094
b: 'initial',
10911095
});
1092-
const mutableSource = createMutableSource(source);
1096+
const mutableSource = createMutableSource(source, param => param.version);
10931097

10941098
const getSnapshotA = () => source.value.a;
10951099
const getSnapshotB = () => source.value.b;
@@ -1144,8 +1148,14 @@ describe('useMutableSource', () => {
11441148
it('should clear the update queue when source changes with pending lower priority updates', async () => {
11451149
const sourceA = createSource('initial');
11461150
const sourceB = createSource('initial');
1147-
const mutableSourceA = createMutableSource(sourceA);
1148-
const mutableSourceB = createMutableSource(sourceB);
1151+
const mutableSourceA = createMutableSource(
1152+
sourceA,
1153+
param => param.versionA,
1154+
);
1155+
const mutableSourceB = createMutableSource(
1156+
sourceB,
1157+
param => param.versionB,
1158+
);
11491159

11501160
function App({toggle}) {
11511161
const state = useMutableSource(
@@ -1185,7 +1195,7 @@ describe('useMutableSource', () => {
11851195
a: 'foo',
11861196
b: 'bar',
11871197
});
1188-
const mutableSource = createMutableSource(source);
1198+
const mutableSource = createMutableSource(source, param => param.version);
11891199

11901200
const getSnapshotA = () => source.value.a;
11911201
const getSnapshotB = () => source.value.b;
@@ -1275,7 +1285,7 @@ describe('useMutableSource', () => {
12751285
a: 'foo',
12761286
b: 'bar',
12771287
});
1278-
const mutableSource = createMutableSource(source);
1288+
const mutableSource = createMutableSource(source, param => param.version);
12791289

12801290
function mutateB(newB) {
12811291
source.value = {
@@ -1334,7 +1344,7 @@ describe('useMutableSource', () => {
13341344
a: 'a0',
13351345
b: 'b0',
13361346
});
1337-
const mutableSource = createMutableSource(source);
1347+
const mutableSource = createMutableSource(source, param => param.version);
13381348

13391349
const getSnapshotA = () => source.value.a;
13401350
const getSnapshotB = () => source.value.b;
@@ -1408,7 +1418,7 @@ describe('useMutableSource', () => {
14081418
a: 'a0',
14091419
b: 'b0',
14101420
});
1411-
const mutableSource = createMutableSource(source);
1421+
const mutableSource = createMutableSource(source, param => param.version);
14121422

14131423
const getSnapshotA = () => source.value.a;
14141424
const getSnapshotB = () => source.value.b;
@@ -1496,7 +1506,7 @@ describe('useMutableSource', () => {
14961506
// @gate experimental
14971507
it('warns about functions being used as snapshot values', async () => {
14981508
const source = createSource(() => 'a');
1499-
const mutableSource = createMutableSource(source);
1509+
const mutableSource = createMutableSource(source, param => param.version);
15001510

15011511
const getSnapshot = () => source.value;
15021512

@@ -1526,7 +1536,7 @@ describe('useMutableSource', () => {
15261536
const {useEffect} = React;
15271537

15281538
const source = createComplexSource('1', '2');
1529-
const mutableSource = createMutableSource(source);
1539+
const mutableSource = createMutableSource(source, param => param.version);
15301540

15311541
// Subscribe to part of the store.
15321542
const getSnapshotA = s => s.valueA;
@@ -1630,7 +1640,7 @@ describe('useMutableSource', () => {
16301640
// @gate experimental
16311641
it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
16321642
const source = createSource('one');
1633-
const mutableSource = createMutableSource(source);
1643+
const mutableSource = createMutableSource(source, param => param.version);
16341644

16351645
let committedA = null;
16361646
let committedB = null;
@@ -1713,7 +1723,10 @@ describe('useMutableSource', () => {
17131723
// @gate experimental
17141724
it('should warn if the subscribe function does not return an unsubscribe function', () => {
17151725
const source = createSource('one');
1716-
const mutableSource = createMutableSource(source);
1726+
const mutableSource = createMutableSource(
1727+
source,
1728+
param => param.version,
1729+
);
17171730

17181731
const brokenSubscribe = () => {};
17191732

@@ -1736,7 +1749,10 @@ describe('useMutableSource', () => {
17361749
// @gate experimental
17371750
it('should error if multiple renderers of the same type use a mutable source at the same time', () => {
17381751
const source = createSource('one');
1739-
const mutableSource = createMutableSource(source);
1752+
const mutableSource = createMutableSource(
1753+
source,
1754+
param => param.version,
1755+
);
17401756

17411757
act(() => {
17421758
// Start a render that uses the mutable source.
@@ -1793,7 +1809,10 @@ describe('useMutableSource', () => {
17931809
// @gate experimental
17941810
it('should error if multiple renderers of the same type use a mutable source at the same time with mutation between', () => {
17951811
const source = createSource('one');
1796-
const mutableSource = createMutableSource(source);
1812+
const mutableSource = createMutableSource(
1813+
source,
1814+
param => param.version,
1815+
);
17971816

17981817
act(() => {
17991818
// Start a render that uses the mutable source.

0 commit comments

Comments
 (0)