Warn about incorrect use of useImperativeHandle() (#14647)

Author: gaearon

packages/react-reconciler/src/ReactFiberHooks.js

@@ -674,6 +674,12 @@ export function useImperativeHandle<T>(
 ): void{
 if(__DEV__){
 currentHookNameInDev='useImperativeHandle';
+warning(
+typeofcreate==='function',
+'Expected useImperativeHandle() second argument to be a function '+
+'that creates a handle. Instead received: %s.',
+create!==null ? typeofcreate : 'null',
+);
 }
 // TODO: If deps are provided, should we skip comparing the ref itself?
 const nextDeps =
@@ -690,6 +696,14 @@ export function useImperativeHandle<T>(
 return()=>refCallback(null);
 }elseif(ref!==null&&ref!==undefined){
 constrefObject=ref;
+if(__DEV__){
+warning(
+refObject.hasOwnProperty('current'),
+'Expected useImperativeHandle() first argument to either be a '+
+'ref callback or React.createRef() object. Instead received: %s.',
+'an object with keys {'+Object.keys(refObject).join(', ')+'}',
+);
+}
 constinst=create();
 refObject.current=inst;
 return()=>{

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -489,6 +489,9 @@ function commitAllLifeCycles(
 }
 }
 while(nextEffect!==null){
+if(__DEV__){
+setCurrentFiber(nextEffect);
+}
 consteffectTag=nextEffect.effectTag;
 
 if(effectTag&(Update|Callback)){
@@ -513,6 +516,9 @@ function commitAllLifeCycles(
 
 nextEffect=nextEffect.nextEffect;
 }
+if(__DEV__){
+resetCurrentFiber();
+}
 }
 
 functioncommitPassiveEffects(root: FiberRoot,firstEffect: Fiber): void{
@@ -526,6 +532,10 @@ function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
 
 leteffect=firstEffect;
 do{
+if(__DEV__){
+setCurrentFiber(effect);
+}
+
 if(effect.effectTag&Passive){
 letdidError=false;
 leterror;
@@ -549,6 +559,9 @@ function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
 }
 effect=effect.nextEffect;
 }while(effect!==null);
+if(__DEV__){
+resetCurrentFiber();
+}
 
 isRendering=previousIsRendering;
 

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

@@ -569,6 +569,45 @@ describe('ReactHooks', () => {
 ]);
 });
 
+it('warns for bad useImperativeHandle first arg',()=>{
+const{useImperativeHandle}=React;
+functionApp(){
+useImperativeHandle({
+focus(){},
+});
+returnnull;
+}
+
+expect(()=>{
+expect(()=>{
+ReactTestRenderer.create(<App/>);
+}).toThrow('create is not a function');
+}).toWarnDev([
+'Expected useImperativeHandle() first argument to either be a '+
+'ref callback or React.createRef() object. '+
+'Instead received: an object with keys {focus}.',
+'Expected useImperativeHandle() second argument to be a function '+
+'that creates a handle. Instead received: undefined.',
+]);
+});
+
+it('warns for bad useImperativeHandle second arg',()=>{
+const{useImperativeHandle}=React;
+constApp=React.forwardRef((props,ref)=>{
+useImperativeHandle(ref,{
+focus(){},
+});
+returnnull;
+});
+
+expect(()=>{
+ReactTestRenderer.create(<App/>);
+}).toWarnDev([
+'Expected useImperativeHandle() second argument to be a function '+
+'that creates a handle. Instead received: object.',
+]);
+});
+
 // https://github.com/facebook/react/issues/14022
 it('works with ReactDOMServer calls inside a component',()=>{
 const{useState}=React;