Loading initial data and getting updates after that (Real Time Database

[theobouwman]

I want to load the initial chats at chats/chatID/messages/ with this code:

/**
     * load initial messages
     */
    useEffect(() => {
        chatRef.child('messages').orderByChild('createdAt').once('value').then(snapshot => {
            setMessages(Object.values(snapshot.val() || {}))
        })
    }, [])

    /**
     * update on new message
     */
    useEffect(() => {
        const onValueChange = chatRef.child('messages')
            .on('child_added', snapshot => {
                const data = snapshot.val()
                console.log(currentUser.uid, 'New message', data)
                if (data) {
                    setMessages(previousMessages =>
                        GiftedChat.append(previousMessages, snapshot.val()),
                    )
                }
            });

        return () => chatRef.off('child_added', onValueChange);
    }, [])  

But I am getting this:

Warning: Encountered two children with the same key, `2bdc64eb-3514-4015-ae6a-c900df1f8334`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Because the onValueChange function is called but even when no data is added to the reference. It is just loaded once...