Move RAF check to first render()

fixes #11114

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -57,11 +57,29 @@ var {
 } = ReactDOMFiberComponent;
 var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree;
 
+let checkForRAF = () => {};
+
 if (__DEV__) {
   var lowPriorityWarning = require('lowPriorityWarning');
   var warning = require('fbjs/lib/warning');
   var validateDOMNesting = require('validateDOMNesting');
   var {updatedAncestorInfo} = validateDOMNesting;
+  var checkedRaf = false;
+
+  checkForRAF = () => {
+    if (
+      !checkedRaf &&
+      ExecutionEnvironment.canUseDOM &&
+      typeof requestAnimationFrame !== 'function'
+    ) {
+      warning(
+        false,
+        'React depends on requestAnimationFrame. Make sure that you load a ' +
+          'polyfill in older browsers. http://fb.me/react-polyfills',
+      );
+    }
+    checkedRaf = true;
+  };
 
   if (
     typeof Map !== 'function' ||
@@ -731,6 +749,7 @@ var ReactDOMFiber = {
     container: DOMContainer,
     callback: ?Function,
   ) {
+    checkForRAF();
     return renderSubtreeIntoContainer(
       null,
       element,

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

@@ -10,7 +10,6 @@
 'use strict';
 
 var React = require('react');
-var ReactDOM = require('react-dom');
 var ReactTestUtils = require('react-dom/test-utils');
 var PropTypes = require('prop-types');
 
@@ -20,11 +19,30 @@ describe('ReactDOMFiber', () => {
   }
 
   var container;
+  var ReactDOM;
 
   beforeEach(() => {
+    ReactDOM = require('react-dom');
     container = document.createElement('div');
   });
 
+  it('warns when requestAnimationFrame is not polyfilled in the browser', () => {
+    const previousRAF = global.requestAnimationFrame;
+    try {
+      global.requestAnimationFrame = undefined;
+      spyOn(console, 'error');
+
+      ReactDOM.render(<div />, container);
+
+      expect(console.error.calls.count()).toBe(1);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'React depends on requestAnimationFrame.',
+      );
+    } finally {
+      global.requestAnimationFrame = previousRAF;
+    }
+  });
+
   it('should render strings as children', () => {
     const Box = ({value}) => <div>{value}</div>;
 

src/renderers/shared/ReactDOMFrameScheduling.js

@@ -22,21 +22,6 @@ import type {Deadline} from 'ReactFiberReconciler';
 
 var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
 
-if (__DEV__) {
-  var warning = require('fbjs/lib/warning');
-
-  if (
-    ExecutionEnvironment.canUseDOM &&
-    typeof requestAnimationFrame !== 'function'
-  ) {
-    warning(
-      false,
-      'React depends on requestAnimationFrame. Make sure that you load a ' +
-        'polyfill in older browsers. http://fb.me/react-polyfills',
-    );
-  }
-}
-
 // TODO: There's no way to cancel, because Fiber doesn't atm.
 let rIC: (callback: (deadline: Deadline) => void) => number;
 

src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js

@@ -10,22 +10,6 @@
 'use strict';
 
 describe('ReactDOMFrameScheduling', () => {
-  it('warns when requestAnimationFrame is not polyfilled in the browser', () => {
-    const previousRAF = global.requestAnimationFrame;
-    try {
-      global.requestAnimationFrame = undefined;
-      jest.resetModules();
-      spyOn(console, 'error');
-      require('react-dom');
-      expect(console.error.calls.count()).toBe(1);
-      expect(console.error.calls.argsFor(0)[0]).toContain(
-        'React depends on requestAnimationFrame.',
-      );
-    } finally {
-      global.requestAnimationFrame = previousRAF;
-    }
-  });
-
   // We're just testing importing, not using it.
   // It is important because even isomorphic components may import it.
   it('can import findDOMNode in Node environment', () => {