Merge pull request #2076 from amannn/getdervicedstatefromprops

Support getDerivedStateFromProps

Changelog.md

@@ -13,6 +13,8 @@
 - The `ApolloProvider` `children` prop type has been changed from `element`
   to `node`, to allow multiple children.
   - [@quentin-](https://github.com/quentin-) in [#1955](https://github.com/apollographql/react-apollo/pull/1955)
+- Properly support the new `getDerivedStateFromProps` lifecycle method.
+  - [@amannn](https://github.com/amannn) in [#2076](https://github.com/apollographql/react-apollo/pull/2076)
 
 ## 2.1.6 (June 19, 2018)
 

src/getDataFromTree.ts

@@ -76,6 +76,7 @@ export function walkTree(
         // In case the user doesn't pass these to super in the constructor
         instance.props = instance.props || props;
         instance.context = instance.context || context;
+
         // Set the instance state to null (not undefined) if not set, to match React behaviour
         instance.state = instance.state || null;
 
@@ -93,7 +94,12 @@ export function walkTree(
           instance.state = Object.assign({}, instance.state, newState);
         };
 
-        if (instance.componentWillMount) {
+        if (Comp.getDerivedStateFromProps) {
+          const result = Comp.getDerivedStateFromProps(instance.props, instance.state);
+          if (result !== null) {
+            instance.state = Object.assign({}, instance.state, result);
+          }
+        } else if (instance.componentWillMount) {
           instance.componentWillMount();
         }
 

test/client/getDataFromTree.test.tsx

@@ -331,6 +331,36 @@ describe('SSR', () => {
         expect(elementCount).toEqual(7);
       });
 
+      it('basic classes with getDerivedStateFromProps', () => {
+        const renderedCounts: Number[] = [];
+        class MyComponent extends React.Component<any> {
+          state = { count: 0 };
+
+          static getDerivedStateFromProps(nextProps: any, prevState: any) {
+            if (nextProps.increment) {
+              return { count: prevState.count + 1 };
+            }
+            return null;
+          }
+
+          componentWillMount() {
+            throw new Error(
+              "`componentWillMount` shouldn't be called when " +
+                '`getDerivedStateFromProps` is available',
+            );
+          }
+
+          render() {
+            renderedCounts.push(this.state.count);
+            return <div>{this.state.count}</div>;
+          }
+        }
+        walkTree(<MyComponent increment />, {}, () => {
+          // noop
+        });
+        expect(renderedCounts).toEqual([1]);
+      });
+
       it('basic classes with React 16.3 context', () => {
         if (!React.createContext) {
           // Preact doesn't support createContext yet, see https://github.com/developit/preact/pull/963