(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?

Dan O · Accepted Answer · 2021-08-14 21:30:45Z

2

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?

answered Aug 14, 2021 at 21:30

Dan O

6,0802 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oscar Rhie Over a year ago

thanks for answering my problem:) Actually I also thought that first issue you mentioned can be a problem. but didn't know about second issue.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related