Added warning for stateless functional components with gDSFP

facebook · Jan 17, 2018 · b699543 · b699543
1 parent 286df77
commit b699543
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactStatelessComponent-test.js b/packages/react-dom/src/__tests__/ReactStatelessComponent-test.js
@@ -98,6 +98,22 @@ describe('ReactStatelessComponent', () => {
     expect(el.textContent).toBe('mest');
   });
 
+  it('should warn for getDerivedStateFromProps on a functional component', () => {
+    function StatelessComponentWithChildContext() {
+      return null;
+    }
+    StatelessComponentWithChildContext.getDerivedStateFromProps = function() {};
+
+    const container = document.createElement('div');
+
+    expect(() =>
+      ReactDOM.render(<StatelessComponentWithChildContext />, container),
+    ).toWarnDev(
+      'StatelessComponentWithChildContext: Stateless ' +
+        'functional components do not support getDerivedStateFromProps.',
+    );
+  });
+
   it('should warn for childContextTypes on a functional component', () => {
     function StatelessComponentWithChildContext(props) {
       return <div>{props.name}</div>;

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -60,12 +60,14 @@ import {
 import {NoWork, Never} from './ReactFiberExpirationTime';
 import {AsyncUpdates} from './ReactTypeOfInternalContext';
 
-let warnedAboutStatelessRefs;
 let didWarnAboutBadClass;
+let didWarnAboutGetDerivedStateOnFunctionalComponent;
+let didWarnAboutStatelessRefs;
 
 if (__DEV__) {
-  warnedAboutStatelessRefs = {};
   didWarnAboutBadClass = {};
+  didWarnAboutGetDerivedStateOnFunctionalComponent = {};
+  didWarnAboutStatelessRefs = {};
 }
 
 export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
@@ -518,8 +520,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
           if (debugSource) {
             warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
           }
-          if (!warnedAboutStatelessRefs[warningKey]) {
-            warnedAboutStatelessRefs[warningKey] = true;
+          if (!didWarnAboutStatelessRefs[warningKey]) {
+            didWarnAboutStatelessRefs[warningKey] = true;
             warning(
               false,
               'Stateless function components cannot be given refs. ' +
@@ -529,6 +531,23 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(
             );
           }
         }
+
+        if (typeof fn.getDerivedStateFromProps === 'function') {
+          const componentName = getComponentName(workInProgress) || 'Unknown';
+
+          if (
+            !didWarnAboutGetDerivedStateOnFunctionalComponent[componentName]
+          ) {
+            warning(
+              false,
+              '%s: Stateless functional components do not support getDerivedStateFromProps.',
+              componentName,
+            );
+            didWarnAboutGetDerivedStateOnFunctionalComponent[
+              componentName
+            ] = true;
+          }
+        }
       }
       reconcileChildren(current, workInProgress, value);
       memoizeProps(workInProgress, props);