Skip to content

Instantly share code, notes, and snippets.

@myitcv
Last active September 18, 2019 15:32
Show Gist options
  • Save myitcv/5aec7ce3c3abbc7eaea981d4be1b7239 to your computer and use it in GitHub Desktop.
Save myitcv/5aec7ce3c3abbc7eaea981d4be1b7239 to your computer and use it in GitHub Desktop.
Typescript example comparing various signatures for getDerivedStateFromProps
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;
}
}
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;
}
}
--- 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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment