useDebugValue should throw if used in a class component (facebook#14601)

ironwebstar · Jan 15, 2019 · 4392e38 · 4392e38
1 parent 153a0b5
commit 4392e38
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -592,6 +592,9 @@ export function useDebugValue(
   value: any,
   formatterFn: ?(value: any) => any,
 ): void {
+  // This will trigger a warning if the hook is used in a non-Function component.
+  resolveCurrentlyRenderingFiber();
+
   // This hook is normally a no-op.
   // The react-debug-hooks package injects its own implementation
   // so that e.g. DevTools can display custom hook values.

diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -31,6 +31,23 @@ describe('ReactHooks', () => {
     ReactDOMServer = require('react-dom/server');
   });
 
+  if (__DEV__) {
+    // useDebugValue is a DEV-only hook
+    it('useDebugValue throws when used in a class component', () => {
+      class Example extends React.Component {
+        render() {
+          React.useDebugValue('abc');
+          return null;
+        }
+      }
+      expect(() => {
+        ReactTestRenderer.create(<Example />);
+      }).toThrow(
+        'Hooks can only be called inside the body of a function component.',
+      );
+    });
+  }
+
   it('warns about variable number of dependencies', () => {
     const {useLayoutEffect} = React;
     function App(props) {