React - Function as a child component to share state between siblings

MainPage.js

import React, { Component } from 'react';
import propTypes from 'PropTypes';
import StateWrapper from './StateWrapper';
import CompA from 'CompA';
import CompB from 'CompB';
import CompC from 'CompC';

class MainPage extends Component {
  render() {
    //layout are determined by children
    return (
      <StateWrapper>
      {(state, updateState) => (
        <CompA {...state} updateCb={updateState} />
        <CompB {...state} updateCb={updateState} />
        <CompC styles={/*any styles here*/} {...state} updateCb={updateState} />
      )}
      </StateWrapper>
    );
  }
}

StateWrapper.js

import React, { Component } from 'react';
import propTypes from 'PropTypes';

class StateWrapper extends Component {
  constructor(props) {
    this.state = {};
    this.updateState = this.updateState.bind(this);
  }
  //....some code goes here
  updateState(nextState) {
    //some logic goes here...
    //...this.setState(...)
  }
  shouldCOmponentUpdate(nextProps, nextState) {
    //keep state object shallow so its easy to compare.
  }
  render() {
    return (
      <div>
        {this.props.children(this.state, this.updateState)}
      </div>
    );
  }
}

StateWrapper.propTypes = {
  children: React.PropTypes.func.isRequired
}

export default StateWrapper;