Component state delegation with React
One prevailing pattern is stateless components. You will most likely have components that require state, but it is easier to follow the flow of data (and write tests) if your components rely solely on props. The stateless pattern is somewhat similar to yours (in that they are both mutating state in the parent), but instead of proxying calls to setState on the top level component AND having to re-implement setState in each component, child components just call the methods passed from the top level to mutate the state and then receive the new data in the form of props.

From React Docs:


  In an ideal world, most of your components would be stateless
  functions because in the future we’ll also be able to make performance
  optimizations specific to these components by avoiding unnecessary
  checks and memory allocations. This is the recommended pattern, when
  possible.


Here is your example using stateless components (except for the top level component):



const { Component } = React;

const MainList = (props) =&gt; {
   const {children} = props;
   return (
     &lt;div&gt;{children}&lt;/div&gt;
   );
}

const MainListContent = (props) =&gt; {
   const {title, items} = props;
   return (
      &lt;div&gt;
       &lt;h5&gt;{title}&lt;/h5&gt;
        &lt;ul&gt;{
            items.map((item, index) =&gt; (
               &lt;li key={index} 
                   onClick={(e) =&gt; props.onSelectItem(item.name)} 
                   style={{cursor: 'pointer', fontWeight: item.selected ? 'bold' : 'normal'}}
               &gt;{item.name}&lt;/li&gt;
              ))
        }&lt;/ul&gt;
      &lt;/div&gt;
   );
}

class UserList extends Component {
  constructor(props) {
    super(props);
    this.state = {
        items: props.items.map(item =&gt; ({
            selected: false,
            name: item
        }))
    }
  }
  onSelectItem(itemName) {
    let { items } = this.state;
    this.setState({
        items: items.map(item =&gt; {
            if (item.name === itemName) {
                item.selected = !item.selected;
            }
            return item;
        })
    });
  }
  render() {
    const { items } = this.state;
   return (
      &lt;MainList&gt;
        &lt;MainListContent ref={ref =&gt; { this.mainListContent = ref; }} onSelectItem={this.onSelectItem.bind(this)} title="Users" items={items} /&gt;
        &lt;pre&gt;count: {items.filter(item =&gt; item.selected).length}&lt;/pre&gt;
      &lt;/MainList&gt;
    )
  }
}

const Root = props =&gt; (
  &lt;UserList items={['foo', 'bar', 'baz']}&gt;&lt;/UserList&gt;
);

ReactDOM.render(
  &lt;Root /&gt;,
  document.getElementById('root')
);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"&gt;&lt;/script&gt;
&lt;div id="root"&gt;&lt;/div&gt;