(React JS) problem with pushing elements into an array inside useEffect function

Question

Hi I'm new to programming in React JS and currently facing trouble about it. its about pushing elements into array

import React, { useState, useEffect, useRef } from 'react'

import 'firebase/database';
import firebase from 'firebase';

import RenderTweet from './RenderTweet';
import RenderReply from './RenderReply';

export default function HomeTweet() {

    const [tweets, setTweets] = useState([])
    const [authUser, setAuthUser] = useState(JSON.parse(localStorage.getItem('authUser')));
    const [tweetList, setTweetList] = useState([])
    const sortTweetsByTime = (tweets) => {

        tweets.sort(function compare(a, b) {
            var temp1 = new Date(a.date)
            var temp2 = new Date(b.date)
            return temp2 - temp1
        })

        return tweets;
    }

    useEffect(() => {
        let temp = []
        firebase.database().ref('users/' + authUser.uid + '/following').once('value').then(function (snapshot) {
            snapshot.forEach(element => {
                firebase.database().ref('users/' + element.key + '/tweets').once('value').then(function (tweets) {
                    tweets.forEach(tweet => {
                        temp.push({
                            "ref": tweet.ref,
                            "date": tweet.val().date
                        })
                    })
                })
            })
        })
        firebase.database().ref('users/' + authUser.uid + '/tweets').once('value').then(function (snapshot) {
            snapshot.forEach(tweet => {
                temp.push({
                    "ref": tweet.ref,
                    "date": tweet.val().date
                })
            })

        })
        setTweets(temp)

        console.log(temp) //first log
        console.log(temp[0]) //second log
        // tweets.forEach(tweet => {
        //     temp2.push(
        //         <RenderTweet tweetRef={tweet.ref} />
        //     )

        // })
        // setTweetList(temp2)

    }, [])


    return (
        <div className="container-fluid" >
            {/* {tweetList} */}


        </div>
    )
}

in first log, it prints out temp array with successfully pushed elements. (length: 4) but in second log, it prints out undefined

log screenshot

can someone help find out whats happening inside this code?

Answer 1

this is a duplicate of two issues.

your array is empty and temp[0] is undefined because react useState is not synchronous, and updates do not take effect until the next time your function component is evaluated:

useState set method not reflecting change immediately

your first console.log shows data because you, a human, did not inspect the value in the console until your function component was re-evaluated and the useState has taken effect:

Is Chrome's JavaScript console lazy about evaluating arrays?