Updating data from Firebase Realtime Database ReactJs using hooks

Question

Anytime the list updates, it forms another array that adds to the previous array, how can I make it to return just one array with the updated information

below is the code

useEffect(() => {
    firebase.database().ref('/users/' + '/messages/').orderByChild('createdAt').on('value', function(snapshot) {
        snapshot.forEach(function(userSnapshot) {
            const id = userSnapshot.key;
            const userData = userSnapshot.val();
            setId(id);
            messages.push(userData);
        });
    });

    setMessages(messages);

}, [messages])

usage in body

<ul>
    {messages.map(function(item){
         return (<li key={id}>{item.displayName}: {item.text}</li>)
       })}
</ul>

when the list updates once, it returns two more lists, so the new list becomes very very long

i think it is because of the .push(), is there any alternative to it — Raphael Inyang
– Raphael Inyang, Commented Sep 28, 2020 at 20:41

Frank van Puffelen · Accepted Answer · 2020-09-28 20:51:24Z

1

I think you're looking for:

firebase.database().ref('/users/' + '/messages/').orderByChild('createdAt').on('value', function(snapshot) {
    messages = []; // clear existing messages
    snapshot.forEach(function(userSnapshot) {
        const id = userSnapshot.key;
        const userData = userSnapshot.val();
        setId(id);
        messages.push(userData);
    });
    setMessages(messages);
});

The changes in here:

Clear the messages array before adding the updated items to it.
Now call setMessages inside the callback, to ensure it gets called when the latest data from the database is in messages.

answered Sep 28, 2020 at 20:51

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

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

1 Comment

Raphael Inyang Over a year ago

thanks so much for your feedback, it worked, since this is jsx, it worked when i used const messages = [ ];

giovanni · Accepted Answer · 2020-09-28 20:53:18Z

1

If your messages is a state variable you should never ever change it directly, what you should do is something like

const newMessages = Array.from(messages);
snap.forEach(message => newMessages.push(message))
setMessages(newMessages);

But of course is the snap is containing ALL your messages then you can just initialize newMessages as an empty array

answered Sep 28, 2020 at 20:53

giovanni

3902 gold badges5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Updating data from Firebase Realtime Database ReactJs using hooks

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related