slices.js

import React from 'react';

class Slice extends Component {
  static propsTypes = {
    children: PropTypes.func.isRequired
  }

  render() {
    return this.props.children();
  }
}

class Badge extends React.Component {
  render() {
    console.log('Badge: render');
    return (
        <div>{ this.props.title }</div>
    );
  }
}

class App extends React.Component {
  constructor(...args) {
    super(...args);

    this.slices = {};
    this.state = {
      title: 'initial'
    };
  }

  shouldComponentUpdate() {
    return false;
  }

  handleWrapperClick() {
    this.setState({
      title: 'updated wrapper',
      test: 10
    }, () => this.slices.wrapper && this.slices.wrapper.forceUpdate());
  }

  handleInnerClick() {
    this.setState({
      title: 'updated inner'
    }, () => this.slices.inner && this.slices.inner.forceUpdate());
  }

  render() {
    console.log('App: render');
    return (
      <Slice ref={ ref => this.slices.wrapper = ref }>
        { () => (
          <div>
            <button onClick={ ::this.handleWrapperClick }>Update wrapper</button>
            <button onClick={ ::this.handleInnerClick }>Update inner</button>
            <Slice ref={ ref => this.slices.inner = ref }>
              { () => <Badge title={ this.state.title }/> }
            </Slice>
          </div>
        ) }
      </Slice>
    );
  }
}

const content = document.getElementById('content');
React.render(<App/>, content);