state-master

StateMaster improves React's methods getDerivedStateFromProps and componentDidUpdate

Installation

NPM

npm install --save state-master

Usage

import {Component} from 'react'
import {withStateMaster, registerContext, unregisterContext} from 'state-master';
 
const PROP_LIST = ['width', 'height', 'bgColor', 'fontSize', 'autoSize'];
// or if just one prop
const PROP_LIST = 'value';
 
// adding initial state is conditional
const INITIAL_STATE = {
  width: 1000,
  height: 500
};
 
class ContainerComponent extends Component {
  static displayName = 'Container';
 
  static getDerivedStateFromProps(data) {
    const {
        nextProps,
        prevProps,
        state,
        isInitial,
        changed,
        changedProps,
        isChanged,
        add,
        addIfChanged,
        isChangedAny,
        addIfChangedAny,
        isChangedAll,
        call,
        get 
      } = data;
 
      // the first initial call
      if (isInitial) {
        // adds param "name" with given value to result state
        add('name', value);
        // adds param "name" with value from nextProps to result state
        add('name');        
      }
 
      // changedProps is an array which contains all changed prop names
      if (changedProps.indexOf('value') !== -1) {
        add('value'); 
      }
 
      // returns true if given prop was changed somehow
      if (isChanged('autoSize')) {
        add('autoSize');
      }      
      // returns true if given prop was changed to given value      
      if (isChanged('autoSize', true)) {
        add('autoSize', true);
      }
 
      // changed is true if one of props from the PROPS_LIST was changed
      if (changed) {
        add('somethingChanged', true);
      }
 
      // returns true if some prop from the PROPS_LIST was changed
      // the same as "changed"
      if (isChangedAny()) {
         add('somethingChanged', true);
      }
      
      // returns true if some prop from given arguments (prop names) was changed
      if (isChangedAny('bgColor', 'fontSize')) {
        const {bgColor, fontSize} = nextProps;
        add('style', {backgroundColor: bgColor, fontSize});
      }
 
      // returns true if all props from the PROPS_LIST were changed
      if (isChangedAll()) {
        add('allChanged', true);
      }
 
      // calls "add" method if given prop was changed
      addIfChanged('name', value);
      addIfChanged('name');
 
      // calls "add" method if some prop from the PROPS_LIST was changed
      addIfChangedAny('name', value);
      addIfChangedAny('name');
      
      // returns true if all prop from given arguments (prop names) were changed        
      if (isChangedAll('width', 'height')) {
        const {width, height} = nextProps;
        add('size', width + 'x' + height);
        
        // calls function with timeout
        // the same as setTimeout(() => this.changeSomething(), 0)
        // use to do some action after component updating
        call(() => {
          this.initNewSizes(width, height);
        });
      }
      
      // returns result state or null      
      // it's something about debugging, put to the end
      console.log(get());
 
      // or you can just return state changes as usually
      return {
        size: nextProps.width + 'x' + nextProps.height
      }
  }
 
  constructor(props) {
    super(props);
    // use "registerContext" if you need to have this context in getDerivedStateFromProps
    registerContext(this);
  }
 
  componentDidUpdate(data) {
    const {
        prevProps,
        prevState,
        snapshot,
        changedProps,
        changed,
        isChanged,
        isChangedAny,
        isChangedAll 
      } = data;
 
      if (isChanged('value')) {
        const {value} = this.props;
        this.doSomeAction(value);
      }
  }
 
  componentWillUnmount() {
    // this should be done if "registerContext" was called
    unregisterContext(this);
  }
 
  render() {
    const {style, size} = this.state;
    return (
      <div className="container" style={style}>
        Size is {size}
      </div>
    )
  }
}
 
export const Container = withStateMaster(ContainerComponent, PROP_LIST, INITIAL_STATE);

If you have some parental component that also has getDerivedStateFromProps add one more argument

class ContainerComponent extends ParentalComponent {
  // ...
}
export const Container = withStateMaster(ContainerComponent, PROP_LIST, null, ParentalComponent);

So the state from ParentalComponent will be added to Container's state and so on