title: React.Children.map vs React Children.toArray.map
body: <p>In React <code>children</code> is the opaque data structure used in composition. To manapulate it, React exposes the <code>React.Children</code> API, which among others, contains the methods <code>React.Children.map</code> and <code>React.Children.toArray</code>. </p>
  
  <p>According to the docs, <code>Children.map</code> invokes a function on every child element (usually to render, or <code>cloneElement</code>), while <code>toArray</code> changes from from the opaque <code>children</code> to a simple js array.</p>
  
  <p><code>React.Children.map(child, fn)</code> and <code>React.Children.toArray.map(child, fn)</code> feel effectively equivalent. I frequently see <code>Children.map</code> used, and was looking for solid evidence to backup the best practice, or an explanation for the use case of <code>toArray.map</code>.</p>
  
  <p>My first instinct is that <code>toArray</code> obviously adds another call, which is potentially less performant (marginally?), but I believe <code>toArray</code> also strips out <code>undefined</code> or <code>null</code> children. </p>