Tweak invalid Hook warning and error (#14747)

Author: gaearon

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -57,13 +57,15 @@ let currentHookNameInDev: ?string;
 functionresolveCurrentlyRenderingComponent(): 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. '+
+'You can only call Hooks at the top level of your React function. '+
+'For more information, see '+
 'https://fb.me/rules-of-hooks',
 );
 }

packages/react-reconciler/src/ReactFiberHooks.js

@@ -235,7 +235,8 @@ function warnOnHookMismatchInDev() {
 functionthrowInvalidHookError(){
 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)',
 );
 }
 
@@ -1188,8 +1189,9 @@ if (__DEV__) {
 constwarnInvalidHookAccess=()=>{
 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',
 );
 };

packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js

@@ -665,7 +665,7 @@ describe('ReactHooks', () => {
 returnnull;
 }
 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.',
 );
 });
 
@@ -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;
 functionApp(){
 useState(()=>{
@@ -850,7 +850,7 @@ describe('ReactHooks', () => {
 returnnull;
 }
 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.',
 );
 });
 
@@ -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',
 ]);
 
 functionValid(){
@@ -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',
 ]);
 });
 

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -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)',
 );
 }
 

packages/react/src/ReactHooks.js

@@ -17,7 +17,8 @@ function resolveDispatcher() {
 constdispatcher=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)',
 );
 returndispatcher;
 }