Skip to content

Commit 7b47a56

Browse files
eps1loneps1lon
committed
Dim console calls when invoking effects due to Strict Mode
1 parent b89c439 commit 7b47a56

5 files changed

Lines changed: 71 additions & 69 deletions

File tree

‎packages/internal-test-utils/__tests__/ReactInternalTestUtils-test.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -180,12 +180,6 @@ describe('ReactInternalTestUtils', () => {
180180
'create effect A',
181181
'create effect B',
182182
'create effect C',
183-
'cleanup effect A',
184-
'cleanup effect B',
185-
'cleanup effect C',
186-
'create effect A',
187-
'create effect B',
188-
'create effect C',
189183
]);
190184

191185
await act(() => {

‎packages/react-devtools-shared/src/__tests__/console-test.js‎

Lines changed: 65 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -663,33 +663,81 @@ describe('console', () => {
663663
);
664664
expect(mockLog.mock.calls).toEqual([
665665
['log effect create'],
666-
['log effect cleanup'],
667-
['log effect create'],
666+
[
667+
'%c%s',
668+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
669+
'log effect cleanup',
670+
],
671+
[
672+
'%c%s',
673+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
674+
'log effect create',
675+
],
668676
]);
669677
expect(mockWarn.mock.calls).toEqual([
670678
['warn effect create'],
671-
['warn effect cleanup'],
672-
['warn effect create'],
679+
[
680+
'%c%s',
681+
`color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
682+
'warn effect cleanup',
683+
],
684+
[
685+
'%c%s',
686+
`color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
687+
'warn effect create',
688+
],
673689
]);
674690
expect(mockError.mock.calls).toEqual([
675691
['error effect create'],
676-
['error effect cleanup'],
677-
['error effect create'],
692+
[
693+
'%c%s',
694+
`color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
695+
'error effect cleanup',
696+
],
697+
[
698+
'%c%s',
699+
`color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
700+
'error effect create',
701+
],
678702
]);
679703
expect(mockInfo.mock.calls).toEqual([
680704
['info effect create'],
681-
['info effect cleanup'],
682-
['info effect create'],
705+
[
706+
'%c%s',
707+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
708+
'info effect cleanup',
709+
],
710+
[
711+
'%c%s',
712+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
713+
'info effect create',
714+
],
683715
]);
684716
expect(mockGroup.mock.calls).toEqual([
685717
['group effect create'],
686-
['group effect cleanup'],
687-
['group effect create'],
718+
[
719+
'%c%s',
720+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
721+
'group effect cleanup',
722+
],
723+
[
724+
'%c%s',
725+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
726+
'group effect create',
727+
],
688728
]);
689729
expect(mockGroupCollapsed.mock.calls).toEqual([
690730
['groupCollapsed effect create'],
691-
['groupCollapsed effect cleanup'],
692-
['groupCollapsed effect create'],
731+
[
732+
'%c%s',
733+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
734+
'groupCollapsed effect cleanup',
735+
],
736+
[
737+
'%c%s',
738+
`color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
739+
'groupCollapsed effect create',
740+
],
693741
]);
694742
});
695743

@@ -729,35 +777,13 @@ describe('console', () => {
729777
</React.StrictMode>,
730778
),
731779
);
732-
expect(mockLog.mock.calls).toEqual([
733-
['log effect create'],
734-
['log effect cleanup'],
735-
['log effect create'],
736-
]);
737-
expect(mockWarn.mock.calls).toEqual([
738-
['warn effect create'],
739-
['warn effect cleanup'],
740-
['warn effect create'],
741-
]);
742-
expect(mockError.mock.calls).toEqual([
743-
['error effect create'],
744-
['error effect cleanup'],
745-
['error effect create'],
746-
]);
747-
expect(mockInfo.mock.calls).toEqual([
748-
['info effect create'],
749-
['info effect cleanup'],
750-
['info effect create'],
751-
]);
752-
expect(mockGroup.mock.calls).toEqual([
753-
['group effect create'],
754-
['group effect cleanup'],
755-
['group effect create'],
756-
]);
780+
expect(mockLog.mock.calls).toEqual([['log effect create']]);
781+
expect(mockWarn.mock.calls).toEqual([['warn effect create']]);
782+
expect(mockError.mock.calls).toEqual([['error effect create']]);
783+
expect(mockInfo.mock.calls).toEqual([['info effect create']]);
784+
expect(mockGroup.mock.calls).toEqual([['group effect create']]);
757785
expect(mockGroupCollapsed.mock.calls).toEqual([
758786
['groupCollapsed effect create'],
759-
['groupCollapsed effect cleanup'],
760-
['groupCollapsed effect create'],
761787
]);
762788
});
763789

‎packages/react-reconciler/src/ReactFiberWorkLoop.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -249,6 +249,7 @@ import {
249249
markRenderStopped,
250250
onCommitRoot as onCommitRootDevTools,
251251
onPostCommitRoot as onPostCommitRootDevTools,
252+
setIsStrictModeForDevtools,
252253
} from './ReactFiberDevToolsHook';
253254
import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
254255
import {releaseCache} from './ReactFiberCacheComponent';
@@ -3667,6 +3668,7 @@ function doubleInvokeEffectsOnFiber(
36673668
fiber: Fiber,
36683669
shouldDoubleInvokePassiveEffects: boolean = true,
36693670
) {
3671+
setIsStrictModeForDevtools(true);
36703672
disappearLayoutEffects(fiber);
36713673
if (shouldDoubleInvokePassiveEffects) {
36723674
disconnectPassiveEffect(fiber);
@@ -3675,6 +3677,7 @@ function doubleInvokeEffectsOnFiber(
36753677
if (shouldDoubleInvokePassiveEffects) {
36763678
reconnectPassiveEffects(root, fiber, NoLanes, null, false);
36773679
}
3680+
setIsStrictModeForDevtools(false);
36783681
}
36793682

36803683
function doubleInvokeEffectsInDEVIfNecessary(

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

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,7 @@ describe('StrictEffectsMode defaults', () => {
115115
</React.StrictMode>,
116116
);
117117

118-
await waitForPaint([
119-
'useLayoutEffect mount "one"',
120-
'useLayoutEffect unmount "one"',
121-
'useLayoutEffect mount "one"',
122-
]);
118+
await waitForPaint(['useLayoutEffect mount "one"']);
123119
expect(log).toEqual([
124120
'useLayoutEffect mount "one"',
125121
'useLayoutEffect unmount "one"',
@@ -142,10 +138,6 @@ describe('StrictEffectsMode defaults', () => {
142138
'useLayoutEffect unmount "one"',
143139
'useLayoutEffect mount "one"',
144140
'useLayoutEffect mount "two"',
145-
146-
// Since "two" is new, it should be double-invoked.
147-
'useLayoutEffect unmount "two"',
148-
'useLayoutEffect mount "two"',
149141
]);
150142
expect(log).toEqual([
151143
// Cleanup and re-run "one" (and "two") since there is no dependencies array.
@@ -196,10 +188,6 @@ describe('StrictEffectsMode defaults', () => {
196188
await waitForAll([
197189
'useLayoutEffect mount "one"',
198190
'useEffect mount "one"',
199-
'useLayoutEffect unmount "one"',
200-
'useEffect unmount "one"',
201-
'useLayoutEffect mount "one"',
202-
'useEffect mount "one"',
203191
]);
204192
expect(log).toEqual([
205193
'useLayoutEffect mount "one"',
@@ -237,12 +225,6 @@ describe('StrictEffectsMode defaults', () => {
237225
'useEffect unmount "one"',
238226
'useEffect mount "one"',
239227
'useEffect mount "two"',
240-
241-
// Since "two" is new, it should be double-invoked.
242-
'useLayoutEffect unmount "two"',
243-
'useEffect unmount "two"',
244-
'useLayoutEffect mount "two"',
245-
'useEffect mount "two"',
246228
]);
247229
expect(log).toEqual([
248230
'useEffect unmount "one"',

‎packages/react/src/__tests__/ReactStrictMode-test.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1567,7 +1567,7 @@ describe('context legacy', () => {
15671567
expect(console.log).toBeCalledWith('foo 1');
15681568
});
15691569

1570-
it('does not disable logs for effect double invoke', async () => {
1570+
it('disable logs for effect double invoke', async () => {
15711571
let create = 0;
15721572
let cleanup = 0;
15731573
function Foo() {
@@ -1593,14 +1593,11 @@ describe('context legacy', () => {
15931593
});
15941594
expect(create).toBe(__DEV__ ? 2 : 1);
15951595
expect(cleanup).toBe(__DEV__ ? 1 : 0);
1596-
expect(console.log).toBeCalledTimes(__DEV__ ? 3 : 1);
1596+
expect(console.log).toBeCalledTimes(1);
15971597
// Note: we should display the first log because otherwise
15981598
// there is a risk of suppressing warnings when they happen,
15991599
// and on the next render they'd get deduplicated and ignored.
16001600
expect(console.log).toBeCalledWith('foo create 1');
1601-
if (__DEV__) {
1602-
expect(console.log).toBeCalledWith('foo cleanup 1');
1603-
}
16041601
});
16051602
}
16061603
});

0 commit comments

Comments
 (0)
⚡