title: How to check if a React element will render anything
body: <p>Say I'm making a wrapper component which should only render itself if some child nodes are passed in:</p>
  
  <pre><code>const Wrapper = ({children}) =&gt; {
    if (!children) return null
    return &lt;div&gt;{children}&lt;/div&gt;
  }
  </code></pre>
  
  <p>The problem is that <code>children</code> could be a <code>Fragment</code> containing null, or an array of nulls. Or a fragment containing a fragment containing...</p>
  
  <pre><code>&lt;Wrapper&gt;hey&lt;/Wrapper&gt; // renders &lt;div&gt;hey&lt;/div&gt; 
  &lt;Wrapper&gt;{null}&lt;/Wrapper&gt; // renders nothing 
  &lt;Wrapper&gt;{[null]}&lt;/Wrapper&gt; // renders &lt;div/&gt; 
  &lt;Wrapper&gt;&lt;React.Fragment&gt;{null}&lt;/React.Fragment&gt;&lt;/Wrapper&gt; // renders &lt;div/&gt; 
  </code></pre>
  
  <p>Is there a canonical way to check for all these conditions?</p>