DevTools bugfix for useState() with hasOwnProperty key (#21524)

2025-11-01 09:12:30 +00:00 · 2021-05-18 16:43:33 -04:00
parent 343776fc90
commit b15bf2b2f1
2 changed files with 43 additions and 8 deletions
@@ -135,4 +135,36 @@ describe('ProfilerStore', () => {
      });
    }).toThrow('Cannot modify filter preferences while profiling');
  });
+
+  it('should not throw if state contains a property hasOwnProperty ', () => {
+    let setStateCallback;
+    const ControlledInput = () => {
+      const [state, setState] = React.useState({hasOwnProperty: true});
+      setStateCallback = setState;
+      return state.hasOwnProperty;
+    };
+
+    const container = document.createElement('div');
+
+    // This element has to be in the <body> for the event system to work.
+    document.body.appendChild(container);
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    ReactDOM.render(<ControlledInput />, container);
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() =>
+      setStateCallback({
+        hasOwnProperty: false,
+      }),
+    );
+    utils.act(() => store.profilerStore.stopProfiling());
+
+    // Only one commit should have been recorded (in response to the "change" event).
+    const root = store.roots[0];
+    const data = store.profilerStore.getDataForRoot(root);
+    expect(data.commitData).toHaveLength(1);
+    expect(data.operations).toHaveLength(1);
+  });
 });
@@ -1221,15 +1221,18 @@ export function attach(
  }

  function isEffect(memoizedState) {
+    if (memoizedState === null || typeof memoizedState !== 'object') {
+      return false;
+    }
+    const {deps} = memoizedState;
+    const hasOwnProperty = Object.prototype.hasOwnProperty.bind(memoizedState);
    return (
-      memoizedState !== null &&
-      typeof memoizedState === 'object' &&
-      memoizedState.hasOwnProperty('tag') &&
-      memoizedState.hasOwnProperty('create') &&
-      memoizedState.hasOwnProperty('destroy') &&
-      memoizedState.hasOwnProperty('deps') &&
-      (memoizedState.deps === null || isArray(memoizedState.deps)) &&
-      memoizedState.hasOwnProperty('next')
+      hasOwnProperty('create') &&
+      hasOwnProperty('destroy') &&
+      hasOwnProperty('deps') &&
+      hasOwnProperty('next') &&
+      hasOwnProperty('tag') &&
+      (deps === null || isArray(deps))
    );
  }