Patch devtools before running useMemo function in strict mode (#28249)

This fixes a regression #25583 where we stopped patching before calling useMemo function. Fixes #27989
facebook · Feb 6, 2024 · db120f6 · db120f6
1 parent 12d56fc
commit db120f6
Show file tree

Hide file tree

Showing 2 changed files with 147 additions and 2 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -625,6 +625,147 @@ describe('console', () => {
     expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
   });
 
+  it('should double log from useMemo if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      React.useMemo(() => {
+        fakeConsole.log('log');
+        fakeConsole.warn('warn');
+        fakeConsole.error('error');
+        fakeConsole.info('info');
+        fakeConsole.group('group');
+        fakeConsole.groupCollapsed('groupCollapsed');
+      }, []);
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockLog.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'log',
+    ]);
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockWarn.mock.calls[1]).toHaveLength(3);
+    expect(mockWarn.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
+      'warn',
+    ]);
+
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(mockError.mock.calls[1]).toHaveLength(3);
+    expect(mockError.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
+      'error',
+    ]);
+
+    expect(mockInfo).toHaveBeenCalledTimes(2);
+    expect(mockInfo.mock.calls[0]).toHaveLength(1);
+    expect(mockInfo.mock.calls[0][0]).toBe('info');
+    expect(mockInfo.mock.calls[1]).toHaveLength(3);
+    expect(mockInfo.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'info',
+    ]);
+
+    expect(mockGroup).toHaveBeenCalledTimes(2);
+    expect(mockGroup.mock.calls[0]).toHaveLength(1);
+    expect(mockGroup.mock.calls[0][0]).toBe('group');
+    expect(mockGroup.mock.calls[1]).toHaveLength(3);
+    expect(mockGroup.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'group',
+    ]);
+
+    expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
+    expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
+    expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
+    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
+    expect(mockGroupCollapsed.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'groupCollapsed',
+    ]);
+  });
+
+  it('should not double log from useMemo fns if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App() {
+      React.useMemo(() => {
+        console.log(
+          'CALL',
+          global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__,
+        );
+        fakeConsole.log('log');
+        fakeConsole.warn('warn');
+        fakeConsole.error('error');
+        fakeConsole.info('info');
+        fakeConsole.group('group');
+        fakeConsole.groupCollapsed('groupCollapsed');
+      }, []);
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+
+    expect(mockInfo).toHaveBeenCalledTimes(1);
+    expect(mockInfo.mock.calls[0]).toHaveLength(1);
+    expect(mockInfo.mock.calls[0][0]).toBe('info');
+
+    expect(mockGroup).toHaveBeenCalledTimes(1);
+    expect(mockGroup.mock.calls[0]).toHaveLength(1);
+    expect(mockGroup.mock.calls[0][0]).toBe('group');
+
+    expect(mockGroupCollapsed).toHaveBeenCalledTimes(1);
+    expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
+    expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
+  });
+
   it('should double log in Strict mode initial render for extension', () => {
     global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;

diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -2636,10 +2636,12 @@ function mountMemo<T>(
 ): T {
   const hook = mountWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
+  const nextValue = nextCreate();
   if (shouldDoubleInvokeUserFnsInHooksDEV) {
+    setIsStrictModeForDevtools(true);
     nextCreate();
+    setIsStrictModeForDevtools(false);
   }
-  const nextValue = nextCreate();
   hook.memoizedState = [nextValue, nextDeps];
   return nextValue;
 }
@@ -2658,10 +2660,12 @@ function updateMemo<T>(
       return prevState[0];
     }
   }
+  const nextValue = nextCreate();
   if (shouldDoubleInvokeUserFnsInHooksDEV) {
+    setIsStrictModeForDevtools(true);
     nextCreate();
+    setIsStrictModeForDevtools(false);
   }
-  const nextValue = nextCreate();
   hook.memoizedState = [nextValue, nextDeps];
   return nextValue;
 }