title: Conditional rendering does not wait for axios data fetch
body: <p>What I am trying to do is fetch data with axios, and then set the data in state. Once that is over, I set the loading flag as false and conditionally render a child component in which I want to retrieve the properties of the first item of the array of the data.</p>
  <p>Here is my custom hook code. I just fetch product data and set the data.</p>
  <pre><code>export const useAllProducts = () =&gt; {
    // const { showMessage } = useMessage();
    const [loading, setLoading] = useState(false);
    const [products, setProducts] = useState&lt;Array&lt;Product&gt;&gt;([]);
  
    const getProducts = useCallback(() =&gt; {
      setLoading(true);
      axios
        .get&lt;Array&lt;Product&gt;&gt;(&quot;http://localhost/api/admin/products&quot;)
        .then(res =&gt; setProducts(res.data))
        .catch(() =&gt;
          console.log('failed to fetch product data')
        )
        .finally(() =&gt; setLoading(false));
    }, []);
  
    return { getProducts, loading, products };
  };
  </code></pre>
  <p>And here is my product page. After loading finishes, it renders the product list component with product data as props.</p>
  <pre><code>const ProductPage: React.FC = () =&gt; {
    const { getProducts, loading, products } = useAllProducts();
    useEffect(() =&gt; {
      getProducts();
    }, []);
  
    return (
      &lt;CommonLayout title=&quot;product list&quot;&gt;
        {!loading ?
          &lt;ProductList title=&quot;product&quot; data={products as Product[]} /&gt; : 'loading'
        }
      &lt;/CommonLayout&gt;
    );
  }
  export default ProductPage;
  </code></pre>
  <p>After this, in the product list component, I expected to be able to access the property names like this.</p>
  <pre><code>  const ProductList = &lt;T,&gt;(
    props: React.PropsWithChildren&lt;Props&lt;T&gt;&gt;
  ) =&gt; {
    console.log(props)
    const classes = useStyles();
    Object.keys(props.data[0])
  
    return (
      &lt;div&gt;
        a
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>However, it gave me an error as below.</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot convert undefined or null to object
  at Function.keys ()
  at ProductList (app.js:12755)
  at renderWithHooks (app.js:33809)
  at mountIndeterminateComponent (app.js:36488)
  at beginWork (app.js:37602)
  at HTMLUnknownElement.callCallback (app.js:19194)
  at Object.invokeGuardedCallbackDev (app.js:19243)
  at invokeGuardedCallback (app.js:19298)
  at beginWork$1 (app.js:42209)
  at performUnitOfWork (app.js:41160)</p>
  </blockquote>
  <p>I even checked the length of the data first, but no luck.</p>
  <p>Does anyone have an idea of why conditional rendering is not working?</p>
  <p><strong>edit1</strong></p>
  <p>Here is my changed custom hook code after the comments. The logic seems to be fine..</p>
  <pre><code>export const useAllProducts = () =&gt; {
    const [loading, setLoading] = useState(true);
    const [products, setProducts] = useState&lt;Array&lt;Product&gt;&gt;([]);
  
    const getProducts = useCallback(() =&gt; {
      axios
        .get&lt;Array&lt;Product&gt;&gt;(&quot;http://localhost/api/admin/products&quot;)
        .then(res =&gt; {
          setProducts(res.data)
          setLoading(false)
        })
        .catch((error) =&gt;
          console.log(error)
        )
    }, []);
  
    return { getProducts, loading, products };
  };
  </code></pre>
  <p><strong>edit:2</strong></p>
  <p>my simplified Product List component code.</p>
  <pre><code>const ProductList = &lt;T, &gt;(
    props: React.PropsWithChildren&lt;Props&lt;T&gt;&gt;
  ) =&gt;{
    console.log(props)
    const classes = useStyles();
    Object.keys(props.data[0])
    //The error is happening here//
  </code></pre>