Added invariant with component stack (in dev) for useRef without func…

…tion
facebook · Mar 10, 2018 · 166d236 · 166d236
1 parent 60efe32
commit 166d236
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -168,7 +168,14 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
   }
 
   function updateUseRef(current, workInProgress) {
-    const nextChildren = workInProgress.type.renderProp(
+    const renderProp = workInProgress.type.renderProp;
+    invariant(
+      typeof renderProp === 'function',
+      'useRef requires a render function but was given %s.%s',
+      renderProp === null ? 'null' : typeof renderProp,
+      ReactDebugCurrentFiber.getCurrentFiberStackAddendum() || '',
+    );
+    const nextChildren = renderProp(
       workInProgress.pendingProps,
       workInProgress.ref,
     );

diff --git a/packages/react/src/__tests__/useRef-test.internal.js b/packages/react/src/__tests__/useRef-test.internal.js
@@ -14,6 +14,10 @@ describe('useRef', () => {
   let ReactFeatureFlags;
   let ReactNoop;
 
+  function normalizeCodeLocInfo(str) {
+    return str && str.replace(/\(at .+?:\d+\)/g, '(at **)');
+  }
+
   beforeEach(() => {
     jest.resetModules();
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -159,7 +163,7 @@ describe('useRef', () => {
     expect(ref.value).toBe(null);
   });
 
-  it('should error if not provided a callback', () => {
+  it('should warn if not provided a callback during creation', () => {
     expect(() => React.useRef(undefined)).toWarnDev(
       'useRef requires a render function but was given undefined.',
     );
@@ -170,4 +174,29 @@ describe('useRef', () => {
       'useRef requires a render function but was given string.',
     );
   });
+
+  it('should error with a callstack if rendered without a function', () => {
+    let RefForwardingComponent;
+    expect(() => {
+      RefForwardingComponent = React.useRef();
+    }).toWarnDev('useRef requires a render function but was given undefined.');
+
+    ReactNoop.render(
+      <div>
+        <RefForwardingComponent />
+      </div>,
+    );
+
+    let caughtError;
+    try {
+      ReactNoop.flush();
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBeDefined();
+    expect(normalizeCodeLocInfo(caughtError.message)).toBe(
+      'useRef requires a render function but was given undefined.' +
+        (__DEV__ ? '\n    in div (at **)' : ''),
+    );
+  });
 });