title: React - most efficient way to share data between components
body: <p>I'll start by saying I'm very new to React and am just playing around with having components interact with each other... trying to get a sense for where <code>state</code> belongs and the most efficient way(s) to render changes on screen. </p>
  
  <p>I have 2 sibling components, <code>Bro</code> and <code>Sis</code> that are direct children of <code>Dad</code>. <code>Bro</code> makes an HTTP request in <code>componentWillMount</code> to get initial values for its <code>state</code>. It then passes one of the pieces of data from the response (<code>uid</code>) back up to <code>Dad</code> (via a method defined in <code>Dad</code>) which is then passed down to <code>Sis</code> via <code>props</code>. <code>Sis</code> then uses this value in making <strong>ITS</strong> initial HTTP request (in <code>componentDidUpdate</code>) to populate <strong>ITS</strong>  <code>state</code>.</p>
  
  <p><strong>Dad</strong></p>
  
  <pre><code>class Dad extends Component {
    state = {
      uid: null
    }
    updateUID = id =&gt; {
      this.setState({uid: id});
    }
  }
  
  render() {
    return (
      &lt;&gt;
        &lt;Bro /&gt;
        &lt;Sis update={this.updateUID} /&gt;
     &lt;/&gt;
    );
  }
  </code></pre>
  
  <p><strong>Sis</strong></p>
  
  <pre><code>class Sis extends Component {
    state = {
      uid: null,
      something: null,
      another: null
    }
  
    componentDidUpdate() {
      axios.get('example.com/endpoint2.json')
        .then(res =&gt; {
          /* 
            transform as needed and put the vales from 
            res.data into this.state accordingly...
          */
        });
    }
  
    render () {
      return &lt;section&gt;Component: Sis&lt;/section&gt;;
    }
  }
  </code></pre>
  
  <p><strong>Bro</strong></p>
  
  <pre><code>class Bro extends Component {
    state = {
      uid: null,
      blah: null,
      blah-blah: null
    }
  
    componentWillUpdate() {
      axios.get('example.com/endpoint1.json')
        .then(res =&gt; {
          /* 
            ...
            transform as needed and put the vales from 
            res.data into this.state accordingly...
          */
  
          // pass uid back up to Dad to be passed down to Sis
          this.props.update(res.data.uid);
        });
    }
  
    render () {
      return &lt;section&gt;Component: Bro&lt;/section&gt;;
    }
  }  
  </code></pre>
  
  <p>Is this <code>Bro</code> --> <code>Dad</code> --> <code>Sis</code> passing of data the right way to do this? This seems a bit slow and perhaps unnecessarily complicated to me... I think. The alternate ways i can think of doing it are:</p>
  
  <ol>
  <li>have <code>Sis</code> make its initial HTTP request in <code>componentWillMount</code> and fetch the value of <code>uid</code> on its own. This would eliminate the need to pass it from one child to the parent to the other child, but it would involve a partially redundant query on the backend which is why I chose not to go this route.</li>
  <li>have <code>Dad</code> make an HTTP request that performs 1 combined query to return the data needed by both <code>Bro</code> and <code>Sis</code> and pass it down to each accordingly. As it stands right now, <code>Dad</code> does not always display <code>Bro</code> and <code>Sis</code> (depending on the <code>route</code>). In those cases, it would be a useless HTTP request and thus definitely not right, but I'm thinking a bit of restructuring may make this viable... 
  perhaps nesting <code>Dad</code> in something like <code>Grandpa</code> and letting <code>Grandpa</code> take care of the routing while <code>Dad</code> fetches the data for <code>Bro</code> and <code>Sis</code>.</li>
  </ol>
  
  <p>So I guess ultimately my question is: should I be passing data between child/adjacent/sibling components via their parent component or should the parent component be the source of the data for both children and pass it down to each accordingly?</p>