Cache child component state

cache-child-state.js

class Child extends Component {
  state = this.props.cachedState
    ? this.props.cachedState
    : {
        value: 0,
      };

  componentWillUnmount() {
    if (this.props.saveState) {
      this.props.saveState(this.state);
    }
  }

  render() {
    return (
      <div>
        <div>Value: {this.state.value}</div>
        <button onClick={this.increaseValue}>Increse value</button>
      </div>
    );
  }

  increaseValue() {
    this.setState({ value: this.state.value + 1 });
  }
}

class Parent extends Component {
  childrenStateCache = {};

  render() {
    return (
      <Parent
        cachedState={this.childrenStateCache['firstChild']}
        saveState={state => this.cacheChildState('firstChild', state)}
      />
    );
  }

  cacheChildState = (type, state) => {
    this.childrenStateCache[type] = state;
  };
}