Merge pull request #9043 from trueadm/fix-fiber-functional-componment-childcontext

[Fiber] adds `childContextTypes` warnings for functional components

Author: trueadm

scripts/fiber/tests-passing-except-dev.txt

@@ -132,9 +132,6 @@ src/renderers/__tests__/ReactHostOperationHistoryHook-test.js
 * gets reported when a child is inserted
 * gets reported when a child is removed
 
-src/renderers/__tests__/ReactStatelessComponent-test.js
-* should warn for childContextTypes on a functional component
-
 src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
 * should not warn when server-side rendering `onScroll`
 * should warn about incorrect casing on properties (ssr)

scripts/fiber/tests-passing.txt

@@ -784,6 +784,7 @@ src/renderers/__tests__/ReactStatelessComponent-test.js
 * should update stateless component
 * should unmount stateless component
 * should pass context thru stateless component
+* should warn for childContextTypes on a functional component
 * should throw when stateless component returns undefined
 * should throw on string refs in pure functions
 * should warn when given a string ref

src/renderers/__tests__/ReactStatelessComponent-test.js

@@ -118,17 +118,26 @@ describe('ReactStatelessComponent', () => {
 
     ReactDOM.render(<StatelessComponentWithChildContext name="A" />, container);
 
-    expectDev(console.error.calls.count()).toBe(2);
-    expectDev(console.error.calls.argsFor(0)[0]).toContain(
-      'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
-      'be defined on a functional component.'
-    );
-    expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
-      'Warning: StatelessComponentWithChildContext.childContextTypes is specified ' +
-      'but there is no getChildContext() method on the instance. You can either ' +
-      'define getChildContext() on StatelessComponentWithChildContext or remove ' +
-      'childContextTypes from it.'
-    );
+    // Stack and Fiber differ in terms of they show warnings
+    if (ReactDOMFeatureFlags.useFiber) {
+      expectDev(console.error.calls.count()).toBe(1);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
+        'be defined on a functional component.'
+      );
+    } else {
+      expectDev(console.error.calls.count()).toBe(2);
+      expectDev(console.error.calls.argsFor(0)[0]).toContain(
+        'StatelessComponentWithChildContext(...): childContextTypes cannot ' +
+        'be defined on a functional component.'
+      );
+      expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(1)[0])).toBe(
+        'Warning: StatelessComponentWithChildContext.childContextTypes is specified ' +
+        'but there is no getChildContext() method on the instance. You can either ' +
+        'define getChildContext() on StatelessComponentWithChildContext or remove ' +
+        'childContextTypes from it.'
+      );
+    }
   });
 
   if (!ReactDOMFeatureFlags.useFiber) {

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -67,7 +67,6 @@ var invariant = require('invariant');
 if (__DEV__) {
   var ReactDebugCurrentFiber = require('ReactDebugCurrentFiber');
   var warning = require('warning');
-
   var warnedAboutStatelessRefs = {};
 }
 
@@ -479,6 +478,15 @@ module.exports = function<T, P, I, TI, PI, C, CX, PL>(
       // Proceed under the assumption that this is a functional component
       workInProgress.tag = FunctionalComponent;
       if (__DEV__) {
+        const Component = workInProgress.type;
+
+        if (Component) {
+          warning(
+            !Component.childContextTypes,
+            '%s(...): childContextTypes cannot be defined on a functional component.',
+            Component.displayName || Component.name || 'Component'
+          );
+        }
         if (workInProgress.ref !== null) {
           let info = '';
           const ownerName = ReactDebugCurrentFiber.getCurrentFiberOwnerName();