title: How do I wait for child components to be "ready" with React hooks?
body: <p>So I have a <code>Page</code> component that contains several <code>Column</code> components, each column contains different user-specific markup.</p>
  
  <p>In the <code>Page</code> component I need to do some additional mutations (like the column overflow check, pushing columns content around, etc.). For this reason, I need a way to be notified after all <code>Column</code> components have mounted - also including implicit mutations have been made.</p>
  
  <p>My first attempt was <code>useEffect</code> hook, however, it does get called before the <code>Column</code> component even receives it's <code>ref</code>.</p>
  
  <pre><code>// AppContext
  const [columns, setColumns] = useState([]);
  
  const Page = ({children}) =&gt; {
      useEffect({
         // This gets called before columns are available
      }, []);
  
      return (&lt;div className="page"&gt;{children}&lt;/div&gt;);
  }
  
  const View = () =&gt; {
      const {columns} = useContext(AppContext);
  
      return (
          &lt;Page&gt;
              {columns.map(c =&gt; &lt;Column&gt;{c}&lt;/Column&gt;)}
          &lt;/Page&gt;
      );
  }
  </code></pre>