title: How to wait for FETCH before rendering DATA in Functional Component?
body: <p>I'm trying to display a <code>&lt;Loading&gt;</code> component till the DATA fetch is a success,<br/>after which I display a Child component. I don't understand why the state is not updated...<br/></p>
  
  <p><strong>How can I handle this?</strong></p>
  
  <p>I'm using <code>react-admin</code> but it doesn't really matter I guess.<br/>
  I have a <code>&lt;Dashboard&gt;</code> which should pass <code>defibs (Array)</code> to the <code>&lt;DefibsCard&gt;</code>.<br/></p>
  
  <p>When I log <code>defibs</code> in <code>&lt;DefibsCard&gt;</code> I have an empty array. Thanks !</p>
  
  <pre class="lang-js prettyprint-override"><code>const Dashboard = () =&gt; {
    const dataProvider = useDataProvider();
    const [loading, setLoading] = useState(true);
    const [defibs, setDefibs] = useState([]);
  
    const fetchDefibs = () =&gt; {
      dataProvider.getList('defibrillateurs', {
        filters: {}, sort: {field: 'id', order: 'ASC'}, pagination: {page: 1, perPage: 10}
      }).then((response) =&gt; {
        setDefibs(response.defibs);
        setLoading(false);
      })
    }
  
    useEffect(() =&gt; {
      fetchDefibs();
      console.log(loading)
    }, [])
  
    const classes = useStyles();
  
    return (!defibs 
      ? &lt;Loading /&gt;
      : &lt;div className={classes.flex}&gt;
          &lt;div className={classes.leftCol}&gt;
            &lt;div className={classes.flexColumn}&gt;
              // ...
              &lt;div className={classes.flex}&gt;
                &lt;DefibsCard defibs={defibs}/&gt; // Child component
                &lt;AlertsCard /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          // ...
        &lt;/div&gt;);
  };
  </code></pre>