title: Best Practice: encapsulate components or compose deeply using props.children
body: <p>I'm faced with a decision about how to compose my components and I'm wondering if the community has any ideas about which is the best practice.</p>
  
  <p><strong>1: Encapsulate components to hide details.</strong></p>
  
  <p>Owner renders:</p>
  
  <pre><code>&lt;List ... /&gt;
  </code></pre>
  
  <p>List renders:</p>
  
  <pre><code>&lt;Item ... /&gt;
  </code></pre>
  
  <p>Item renders: </p>
  
  <pre><code>&lt;div&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>In this version the components aren't very reusable because they know alot about the domain details.  The Owner doesn't know anything about an Item in a list.</p>
  
  <p><strong>2: Nest components deeply near the top, stateful view-controllers</strong></p>
  
  <p>Owner renders:</p>
  
  <pre><code>&lt;List&gt;
    &lt;Item&gt;
      &lt;div&gt;...&lt;/div&gt;
    &lt;/Item&gt;
  &lt;/List&gt;
  </code></pre>
  
  <p>In this version, the Owner knows all about the composition of it's children, but the components themselves aren't very useful, because they know nothing about the domain.  They are however more reusable.</p>
  
  <p><strong>3: Encapsulate generic components in domain specific components</strong></p>
  
  <p>This is a hybrid of option 1 and option 2</p>
  
  <p>Owner renders:</p>
  
  <pre><code>&lt;DomainList ... /&gt;
  </code></pre>
  
  <p>DomainList renders:</p>
  
  <pre><code>&lt;List ...&gt;
    &lt;DomainItem .../&gt;
  &lt;/List&gt;
  </code></pre>
  
  <p>DomainItem renders: </p>
  
  <pre><code>&lt;Item ...&gt;
     ...
  &lt;/Item&gt;
  </code></pre>
  
  <p>The Owner knows nothing about the generic List, DomainItem, or generic Item.</p>
  
  <p>Which approach is better?  Has anyone had success or failure with any of these approaches?  What happened?</p>