title: Table body not updating in react , when fetching data from firebase
body: <p>Im fetching some data from firebase and updating a state,but the tables not updating when the page loads. Althoght , the table updates if i make some changes to the file and save it.</p>
  <p>Code -</p>
  <pre><code>  const [leaderdata, setdata] = useState({});
    const database = firebase.database().ref();
  
    useEffect(() =&gt; {
      var x = 0;
      //getting the data from firebase and storing it in a state
      database.orderByChild(&quot;ques_fund&quot;).once(&quot;child_added&quot;, (snapshot) =&gt; {
        var temp = leaderdata;
        temp[x] = snapshot.val();
        setdata(temp);
        x = x + 1;
      });
      console.log(leaderdata);
    }, []);
  
  
  return (
      &lt;div&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Rank&lt;/th&gt;
              &lt;th&gt;Participant Name&lt;/th&gt;
              &lt;th&gt;Score&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            {leaderdata ? (
              Object.values(leaderdata).map((row, index) =&gt; {
                console.log(&quot;hi&quot;);
                return (
                  &lt;tr key={row.timestamp}&gt;
                    &lt;td&gt;{index}&lt;/td&gt;
                    &lt;td&gt;{row.name}&lt;/td&gt;
                    &lt;td&gt;{row.ques_fund}&lt;/td&gt;
                  &lt;/tr&gt;
                );
              })
            ) : (
              &lt;h1&gt;No data&lt;/h1&gt;
            )}
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    );
  
  </code></pre>
  <p>The console.log at the end of useEffect(which is leaderdata) gives  -&gt;
  <a href="https://i.stack.imgur.com/VADok.png" rel="nofollow noreferrer">log at the end of use Effect</a></p>