Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweak invalid Hook warning and error #14747

Merged
merged 1 commit into from Feb 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/react-dom/src/server/ReactPartialRendererHooks.js
Expand Up @@ -57,13 +57,15 @@ let currentHookNameInDev: ?string;
function resolveCurrentlyRenderingComponent(): Object {
invariant(
currentlyRenderingComponent !== null,
'Hooks can only be called inside the body of a function component.',
'Hooks can only be called inside the body of a function component. ' +
'(https://fb.me/react-invalid-hook-call)',
);
if (__DEV__) {
warning(
!isInHookUserCodeInDev,
'Hooks can only be called inside the body of a function component. ' +
'Do not call Hooks inside other Hooks. For more information, see ' +
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice nice nice

'You can only call Hooks at the top level of your React function. ' +
'For more information, see ' +
'https://fb.me/rules-of-hooks',
);
}
Expand Down
8 changes: 5 additions & 3 deletions packages/react-reconciler/src/ReactFiberHooks.js
Expand Up @@ -235,7 +235,8 @@ function warnOnHookMismatchInDev() {
function throwInvalidHookError() {
invariant(
false,
'Hooks can only be called inside the body of a function component.',
'Hooks can only be called inside the body of a function component. ' +
'(https://fb.me/react-invalid-hook-call)',
);
}

Expand Down Expand Up @@ -1188,8 +1189,9 @@ if (__DEV__) {
const warnInvalidHookAccess = () => {
warning(
false,
'Hooks can only be called inside the body of a function component. ' +
'Do not call Hooks inside other Hooks. For more information, see ' +
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' +
'You can only call Hooks at the top level of your React function. ' +
'For more information, see ' +
'https://fb.me/rules-of-hooks',
);
};
Expand Down
Expand Up @@ -665,7 +665,7 @@ describe('ReactHooks', () => {
return null;
}
expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
);
});

Expand Down Expand Up @@ -835,12 +835,12 @@ describe('ReactHooks', () => {
if (__DEV__) {
expect(console.error).toHaveBeenCalledTimes(3);
expect(console.error.calls.argsFor(0)[0]).toContain(
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
);
}
});

it("throws when calling hooks inside useState's initialize function", () => {
it("warns when calling hooks inside useState's initialize function", () => {
const {useState, useRef} = React;
function App() {
useState(() => {
Expand All @@ -850,7 +850,7 @@ describe('ReactHooks', () => {
return null;
}
expect(() => ReactTestRenderer.create(<App />)).toWarnDev(
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.',
);
});

Expand Down Expand Up @@ -892,9 +892,9 @@ describe('ReactHooks', () => {
}).toWarnDev([
// We see it twice due to replay
'Context can only be read while React is rendering',
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
'Context can only be read while React is rendering',
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
]);

function Valid() {
Expand Down Expand Up @@ -925,9 +925,9 @@ describe('ReactHooks', () => {
}).toWarnDev([
// We see it twice due to replay
'Context can only be read while React is rendering',
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
'Context can only be read while React is rendering',
'Hooks can only be called inside the body of a function component',
'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks',
]);
});

Expand Down
3 changes: 2 additions & 1 deletion packages/react-test-renderer/src/ReactShallowRenderer.js
Expand Up @@ -218,7 +218,8 @@ class ReactShallowRenderer {
_validateCurrentlyRenderingComponent() {
invariant(
this._currentlyRenderingComponent !== null,
'Hooks can only be called inside the body of a function component.',
'Hooks can only be called inside the body of a function component. ' +
'(https://fb.me/react-invalid-hook-call)',
);
}

Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/ReactHooks.js
Expand Up @@ -17,7 +17,8 @@ function resolveDispatcher() {
const dispatcher = ReactCurrentDispatcher.current;
invariant(
dispatcher !== null,
'Hooks can only be called inside the body of a function component.',
'Hooks can only be called inside the body of a function component. ' +
'(https://fb.me/react-invalid-hook-call)',
);
return dispatcher;
}
Expand Down