useDebugValue should throw if used in a class component (#14601)
Brian Vaughn committed
Jan 15, 2019 at 13:49 UTC
4392e3821d4e3845a2ffc6104c32c13b3f521edf
2 files changed
+20
packages/react-reconciler/src/ReactFiberHooks.js
+3
@@ -592,6 +592,9 @@ export function useDebugValue(
592
value: any,
593
formatterFn: ?(value: any) => any,
594
): void {
595
+ // This will trigger a warning if the hook is used in a non-Function component.
596
+ resolveCurrentlyRenderingFiber();
597
+
598
// This hook is normally a no-op.
599
// The react-debug-hooks package injects its own implementation
600
// so that e.g. DevTools can display custom hook values.
packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+17
@@ -31,6 +31,23 @@ describe('ReactHooks', () => {
31
ReactDOMServer = require('react-dom/server');
32
});
33
34
+ if (__DEV__) {
35
+ // useDebugValue is a DEV-only hook
36
+ it('useDebugValue throws when used in a class component', () => {
37
+ class Example extends React.Component {
38
+ render() {
39
+ React.useDebugValue('abc');
40
+ return null;
41
+ }
42
+ }
43
+ expect(() => {
44
+ ReactTestRenderer.create(<Example />);
45
+ }).toThrow(
46
+ 'Hooks can only be called inside the body of a function component.',
47
+ );
48
+ });
49
+ }
50
+
51
it('warns about variable number of dependencies', () => {
52
const {useLayoutEffect} = React;
53
function App(props) {