Tweak invalid Hook warning and error (#14747)
Dan Abramov committed
Feb 1, 2019 at 21:05 UTC
c21c41ecfad46de0a718d059374e48d13cf08ced
5 files changed
+22
-16
packages/react-dom/src/server/ReactPartialRendererHooks.js
+5
-3
@@ -57,13 +57,15 @@ let currentHookNameInDev: ?string;
57
function resolveCurrentlyRenderingComponent(): Object {
58
invariant(
59
currentlyRenderingComponent !== null,
60
- 'Hooks can only be called inside the body of a function component.',
60
+ 'Hooks can only be called inside the body of a function component. ' +
61
+ '(https://fb.me/react-invalid-hook-call)',
62
);
63
if (__DEV__) {
64
warning(
65
!isInHookUserCodeInDev,
65
- 'Hooks can only be called inside the body of a function component. ' +
66
- 'Do not call Hooks inside other Hooks. For more information, see ' +
66
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
67
+ 'You can only call Hooks at the top level of your React function. ' +
68
+ 'For more information, see ' +
69
'https://fb.me/rules-of-hooks',
70
);
71
}
packages/react-reconciler/src/ReactFiberHooks.js
+5
-3
@@ -235,7 +235,8 @@ function warnOnHookMismatchInDev() {
235
function throwInvalidHookError() {
236
invariant(
237
false,
238
- 'Hooks can only be called inside the body of a function component.',
238
+ 'Hooks can only be called inside the body of a function component. ' +
239
+ '(https://fb.me/react-invalid-hook-call)',
240
);
241
}
242
@@ -1188,8 +1189,9 @@ if (__DEV__) {
1189
const warnInvalidHookAccess = () => {
1190
warning(
1191
false,
1191
- 'Hooks can only be called inside the body of a function component. ' +
1192
- 'Do not call Hooks inside other Hooks. For more information, see ' +
1192
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
1193
+ 'You can only call Hooks at the top level of your React function. ' +
1194
+ 'For more information, see ' +
1195
'https://fb.me/rules-of-hooks',
1196
);
1197
};
packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+8
-8
@@ -665,7 +665,7 @@ describe('ReactHooks', () => {
665
return null;
666
}
667
expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
668
- 'Hooks can only be called inside the body of a function component',
668
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
669
);
670
});
671
@@ -835,12 +835,12 @@ describe('ReactHooks', () => {
835
if (__DEV__) {
836
expect(console.error).toHaveBeenCalledTimes(3);
837
expect(console.error.calls.argsFor(0)[0]).toContain(
838
- 'Hooks can only be called inside the body of a function component',
838
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
839
);
840
}
841
});
842
843
- it("throws when calling hooks inside useState's initialize function", () => {
843
+ it("warns when calling hooks inside useState's initialize function", () => {
844
const {useState, useRef} = React;
845
function App() {
846
useState(() => {
@@ -850,7 +850,7 @@ describe('ReactHooks', () => {
850
return null;
851
}
852
expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
853
- 'Hooks can only be called inside the body of a function component',
853
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
854
);
855
});
856
@@ -892,9 +892,9 @@ describe('ReactHooks', () => {
892
}).toWarnDev([
893
// We see it twice due to replay
894
'Context can only be read while React is rendering',
895
- 'Hooks can only be called inside the body of a function component',
895
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
896
'Context can only be read while React is rendering',
897
- 'Hooks can only be called inside the body of a function component',
897
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
898
]);
899
900
function Valid() {
@@ -925,9 +925,9 @@ describe('ReactHooks', () => {
925
}).toWarnDev([
926
// We see it twice due to replay
927
'Context can only be read while React is rendering',
928
- 'Hooks can only be called inside the body of a function component',
928
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
929
'Context can only be read while React is rendering',
930
- 'Hooks can only be called inside the body of a function component',
930
+ 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
931
]);
932
});
933
packages/react-test-renderer/src/ReactShallowRenderer.js
+2
-1
@@ -218,7 +218,8 @@ class ReactShallowRenderer {
218
_validateCurrentlyRenderingComponent() {
219
invariant(
220
this._currentlyRenderingComponent !== null,
221
- 'Hooks can only be called inside the body of a function component.',
221
+ 'Hooks can only be called inside the body of a function component. ' +
222
+ '(https://fb.me/react-invalid-hook-call)',
223
);
224
}
225
packages/react/src/ReactHooks.js
+2
-1
@@ -17,7 +17,8 @@ function resolveDispatcher() {
17
const dispatcher = ReactCurrentDispatcher.current;
18
invariant(
19
dispatcher !== null,
20
- 'Hooks can only be called inside the body of a function component.',
20
+ 'Hooks can only be called inside the body of a function component. ' +
21
+ '(https://fb.me/react-invalid-hook-call)',
22
);
23
return dispatcher;
24
}