React Native - good practice: SegmentedControlIOS with ListView
<p>What are the best practices in implementing <code>SegmentedControllIOS</code> with <code>ListView</code>? I tried three solutions, all examples contain <code>SegmentedControllIOS</code> with two segments and two <code>ListView</code>. I invite you to discuss performance of this three (maybe someone could propose other, better solution). From my perspective examples are given in order from most efficient.</p>

<h3>1. Two independent dataSource, one ListView (change dataSource of ListView)</h3>

<pre><code>class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds1: new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2,}),
      ds2: new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2,}),
      index: 0,
    };
  }

  render() {
    return (
      &lt;View&gt;
        &lt;SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={() =&gt; this.setState({index: (this.state.index+1)%2})}
        /&gt;
        &lt;ListView dataSource={this.state.index ? this.state.ds2 : this.state.ds1} /&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre>

<h3>2. Two independent dataSource and two independent ListView</h3>

<pre><code>class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds1: new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2,}),
      ds2: new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2,}),
      index: 0,
    };
  }

  render() {
    return (
      &lt;View&gt;
        &lt;SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={() =&gt; this.setState({index: (this.state.index+1)%2})}
        /&gt;
        {this.state.index === 0 ?
          (&lt;ListView dataSource={this.state.ds1} /&gt;)
        :
          (&lt;ListView dataSource={this.state.ds2} /&gt;)
        }
      &lt;/View&gt;
    );
  }
}
</code></pre>

<h3>3. One dataSource, cloneWithRows on dataSource on change index</h3>

<pre><code>class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ds: new ListView.DataSource({ rowHasChanged: (r1, r2) =&gt; r1 !== r2,}),
      ds1: ['some', 'data'],
      ds2: ['some', 'other', 'data'],
      index: 0,
    };
    this.onChange = this.onChange.bind(this);
  }

  onChange() {
    this.setState({
      ds: this.state.ds.cloneWithRows(this.state.index ? this.ds1 : this.ds2),
      index: (this.state.index+1)%2,
    })
  }

  render() {
    return (
      &lt;View&gt;
        &lt;SegmentedControlIOS
          selectedIndex={this.state.index}
          values={['ds1', 'ds2']}
          onChange={this.onChange}
        /&gt;
        &lt;ListView dataSource={this.state.ds} /&gt;
      &lt;/View&gt;
    );
  }
}
</code></pre>