Typescript example comparing various signatures for getDerivedStateFromProps

01_ReactTeamProposal.ts

interface MyCompProps {
        model: Model;
        modParams: ModParams;
}

interface MyCompState {
        derived1?: Derived1;
        derived2?: Derived2;

        initialized: boolean;

        prevModel?: Model;
        prevModParams?: ModParams;
}

class MyComp extends React.Component<MyCompProps, MyCompState> {
        constructor() {
                this.state = {
                        initialized: false,
                } as MyCompState;
        }

        static getDerivedStateFromProps(nextProps: MyCompProps, prevState: MyCompState): MyCompState {
                let nextState = {} as MyCompState;

                if (!prevState.initialized) {
                        // ...
                }

                if (nextProps.model !== prevState.prevModel) {
                        nextState.derived1 = this.calcDerived1(nextProps.model);
                        nextState.prevModel = nextProps.model;
                }

                if (nextProps.modparams !== prevState.prevModParams) {
                        nextState.derived2 = this.calcDerived2(nextProps.modparams);
                        nextState.prevModParams = nextProps.modparams;
                }

                nextState.initialized = true;

                return nextState;
        }
}

02_PaulProposal.ts

interface MyCompProps {
        model: Model;
        modParams: ModParams;
}

interface MyCompState {
        derived1?: Derived1;
        derived2?: Derived2;
}

class MyComp extends React.Component<MyCompProps, MyCompState> {
        constructor() {
                this.state = {} as MyCompState;
        }

        static getDerivedStateFromProps(nextProps: MyCompProps, prevProps: MyCompProps, initial: boolean): MyCompState {
                let nextState = {} as MyCompState;

                if (initial) {
                        // ...
                }

                if (nextProps.model !== prevProps.model) {
                        nextState.derived1 = this.calcDerived1(nextProps.model);
                }

                if (nextProps.modparams !== prevProps.modParams) {
                        nextState.derived2 = this.calcDerived2(nextProps.modparams);
                }

                return nextState;
        }
}

03_Diff.diff

--- 01_ReactTeamProposal.ts     2018-01-29 15:58:04.675210440 +0000
+++ 02_PaulProposal.ts  2018-01-29 15:57:47.266945880 +0000
@@ -6,39 +6,28 @@
 interface MyCompState {
        derived1?: Derived1;
        derived2?: Derived2;
-
-       initialized: boolean;
-
-       prevModel?: Model;
-       prevModParams?: ModParams;
 }

 class MyComp extends React.Component<MyCompProps, MyCompState> {
        constructor() {
-               this.state = {
-                       initialized: false,
-               } as MyCompState;
+               this.state = {} as MyCompState;
        }

-       static getDerivedStateFromProps(nextProps: MyCompProps, prevState: MyCompState): MyCompState {
+       static getDerivedStateFromProps(nextProps: MyCompProps, prevProps: MyCompProps, initial: boolean): MyCompState {
                let nextState = {} as MyCompState;

-               if (!prevState.initialized) {
+               if (initial) {
                        // ...
                }

-               if (nextProps.model !== prevState.prevModel) {
+               if (nextProps.model !== prevProps.model) {
                        nextState.derived1 = this.calcDerived1(nextProps.model);
-                       nextState.prevModel = nextProps.model;
                }

-               if (nextProps.modparams !== prevState.prevModParams) {
+               if (nextProps.modparams !== prevProps.modParams) {
                        nextState.derived2 = this.calcDerived2(nextProps.modparams);
-                       nextState.prevModParams = nextProps.modparams;
                }

-               nextState.initialized = true;
-
                return nextState;
        }
 }