UseEffect infinite loop with Firebase - reactjs

Question

Hi i'm trying to build a simple chat, but I encountered some issues when reading the messages.
const [messages, setMessages] = useState([]);
const messagesArray = [];
const messagesRef = firestore().collection('messages');
useEffect(() => {
id
? messagesRef
.where('idRequest', '==', id)
.orderBy('createdAt')
.limit(25)
.get()
.then((response) => {
response.forEach((doc) => {
messagesArray.push(doc.data());
});
setMessages(messagesArray);
console.log('Changes: ', messages);
})
: console.log('No ID provided.');
}, [messages]);
If I run it with the dependency 'messages', It works, but the app gets very slow, so I placed a console.log to check the flow of the useEffect, and I figured it was on an infinite loop, looking for changes over and over. I assume this happens because whenever the useEffect runs, It 're sets' the messages array, so that causes it to run again.
I can solve the loop issue by removing 'messages' from the dependency array, but the problem is it won't render again when a new message is sent or received. So I'm not sure what I should do.
PS: The chat depends on the actual user ID, the condition at the start is to assure an ID is received, otherwhise it shouldn't query the firestore db.

Answer 1

I ran into this issue and the following seem to work. Like #Thor0o0 said, you would need a conditional statement to check if you already captured the message in your state.
I would use id as a dependency and not messages.
const [messages, setMessages] = useState([]);
const messagesRef = firestore().collection('messages');
useEffect(() => {
if(!id) return console.log('No ID provided.');
const messagesArray = messages;
messagesRef
.where('idRequest', '==', id)
.orderBy('createdAt')
.limit(25)
.get()
.then((response) => {
response.forEach((doc) => {
const foundMsgIndex = messagesArray.findIndex(msg=>msg.id===doc.id)
if(foundMsgIndex < 0){
messagesArray.push({...doc.data(), id:doc.id});
}
});
setMessages(messagesArray);
console.log('Changes: ', messages);
})
}, [id]);

Answer 2

You call SetMessages() inside the UseEffect, which changes messages, which triggers your useEffect.
Your linter should have caught this.

Answer 3

Check the code below.
const [messages, setMessages] = useState([]);
const messagesArray = [];
const messagesRef = firestore().collection('messages');
useEffect(() => {
id
? messagesRef
.where('idRequest', '==', id)
.orderBy('createdAt')
.limit(25)
.get()
.then((response) => {
response.forEach((doc) => {
//check here if the message is already in the messages array
//before pushing it and calling setMessages. Use findIndex or
//filter method to do so.
//something like this
const messageExists = messages.findIndex(doc.data());
if (!messageExists){
messagesArray.push(doc.data());
setMessages(messagesArray);
});
})
: console.log('No ID provided.');
}, [messages]);

Answer 4

Since you said you need to keep the messages array as a dependency of useEffect, what you can do is keep a copy of the messages array in a ref and compare it to the messages variable in your useEffect callback.
const [messages, setMessages] = useState([]);
const messagesArray = [];
const messagesRef = firestore().collection("messages");
const lastMessages = useRef();
useEffect(() => {
// Only do something if the messages variable was reassigned outside of the useEffect
if (messages !== lastMessages.current) {
id
? messagesRef
.where("idRequest", "==", id)
.orderBy("createdAt")
.limit(25)
.get()
.then((response) => {
response.forEach((doc) => {
messagesArray.push(doc.data());
});
// Update the value of the ref
lastMessages.current = messagesArray;
setMessages(messagesArray);
console.log("Changes: ", messages);
})
: console.log("No ID provided.");
}
}, [messages]);
This works because the value of a ref is preserved even when the component re-renders.

Answer 5

The only time you use messages in your useEffect is for console.log('Changes: ', messages) - which won't even be valid by that point.
Remove that console.log statement, and messages won't be a dependency any more. No more loop. id and messageArray are actual dependencies, and should be added; neither one is modified in the useEffect, so no loop.
IF you need the console.log('Changes: ', messages), don't do it in this useEffect - create another JUST FOR THE CONSOLE.LOG.
useEffect(() => {
console.log('Changes: ', messages);
}, [messages]);
this will only be called when messages changes, and doesn't modify messages, so no loop.