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

Author: bvaughn

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.

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',()=>{
+classExampleextendsReact.Component{
+render(){
+React.useDebugValue('abc');
+returnnull;
+}
+}
+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;
 functionApp(props){