title: Better composition for react?
body: <p>Lets say I have a component <strong>A</strong> that renders 2 components <strong>B</strong> and <strong>C</strong>.</p>
  
  <p><strong>B</strong> and <strong>C</strong> renders cateogories and requires a <code>cat_id</code> as <code>props</code>.<br>
  They will call <strong>apiB</strong> and <strong>apiC</strong> using the <code>cat_id</code> respectively.</p>
  
  <h3>1</h3>
  
  <p>Is it better to store <code>cat_id</code> in the parent (<strong>A</strong>) and pass <code>cat_id</code>as <code>props</code> to <strong>B</strong> and <strong>C</strong>? Note <code>cat_id</code> is dynamic and is stored as a state object in <strong>A</strong>.</p>
  
  <p>When <strong>A</strong> call <code>setState</code> to update <code>cat_id</code>, <strong>B</strong> and <strong>C</strong> will call the apis in <code>componentDidUpdate</code>.</p>
  
  <h3>2</h3>
  
  <p>Or is it better to call the apis in <strong>A</strong> instead, and pass off the results as props to <strong>B</strong> and <strong>C</strong> instead?</p>
  
  <p>Reason I'm asking is because I'm using option 1 now. The child component has 4 renders on a single page load. I'm guessing having too much <code>setState</code> in the parent is bad.</p>
  
  <p>I'd spent hours trying moving things around and changing condition in <code>componentDidUpdate</code> and <code>componentShouldUpdate</code> but it still seem slow.</p>
  
  <p>Before I try option 2, would like to know if anyone already knows which is a better composition for React components.</p>