title: React: function return before fetch finish
body: <p>When i call the function ShowUserPanel() i also call the getUsers function that gives me the data that i have to insert in the var rows that is necessary to populate the table. The problem is that the ShowUserPanel function return the empty table without the data, but if i go to another page and comeback the table is populated, i don't know how to populate the table at the call of the funciton.</p>
  
  <pre class="lang-js prettyprint-override"><code>function createData(name, surname, username, email) {
      return { name, surname, username, email };
  }
  
  var rows = []
  
  function getUsers(_callback) {
      fetch(conn, {
          method: 'POST',
          headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
          },
          body: JSON.stringify({
              username: localStorage.getItem("username"),
          })
      }).then((response) =&gt; response.json())
          .then((responseJson) =&gt; {
              var name = new Array(responseJson[0]);
              var surname = new Array(responseJson[1]);
              var username = new Array(responseJson[2]);
              var email = new Array(responseJson[3]);
              var count = name[0]['length'];
              var temp = new Array();
              var i = 0;
              while (i &lt;= count) {
                  temp.push(createData(name[0][i], surname[0][i], username[0][i], email[0][i]));
                  i++;
              }
              rows = temp;
              _callback();
          }).catch((error) =&gt; {
          console.error(error.toString());
      });
  }
  
  export default function ShowUserPanel() {
      getUsers(function () {
          console.log('finish');
      });
      const classes = useStyles();
  
      return (
          &lt;div style={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%'}}&gt;
              &lt;div&gt;
                  &lt;h1&gt;SHOW USERS&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;UserButtonList/&gt;
              &lt;/div&gt;
              &lt;div style={{
                  width: '100%',
                  height: '100%',
                  display: 'felx',
                  alignItems: 'center',
                  justifyContent: 'center'
              }}&gt;
                  &lt;Card style={{
                      width: '100%',
                      height: '100%',
                      marginTop: '10px',
                      backgroundColor: 'transparent',
                      color: 'white'
                  }}&gt;
                      &lt;TableContainer component={Paper}&gt;
                          &lt;Table className={classes.table} aria-label="customized table"&gt;
                              &lt;TableHead&gt;
                                  &lt;TableRow&gt;
                                      &lt;StyledTableCell align="center"&gt;NAME&lt;/StyledTableCell&gt;
                                      &lt;StyledTableCell align="center"&gt;SURNAME&lt;/StyledTableCell&gt;
                                      &lt;StyledTableCell align="center"&gt;USERNAME&lt;/StyledTableCell&gt;
                                      &lt;StyledTableCell align="center"&gt;EMAIL&lt;/StyledTableCell&gt;
                                  &lt;/TableRow&gt;
                              &lt;/TableHead&gt;
                              &lt;TableBody&gt;
                                  {rows.map((row) =&gt; (
                                      &lt;StyledTableRow key={row.name}&gt;
                                          &lt;StyledTableCell component="th" scope="row" align="center"&gt;
                                              {row.name}
                                          &lt;/StyledTableCell&gt;
                                          &lt;StyledTableCell align="center"&gt;{row.surname}&lt;/StyledTableCell&gt;
                                          &lt;StyledTableCell align="center"&gt;{row.username}&lt;/StyledTableCell&gt;
                                          &lt;StyledTableCell align="center"&gt;{row.email}&lt;/StyledTableCell&gt;
                                      &lt;/StyledTableRow&gt;
                                  ))}
                              &lt;/TableBody&gt;
                          &lt;/Table&gt;
                      &lt;/TableContainer&gt;
                  &lt;/Card&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>