Actualmente estoy trabajando en una aplicación de chat en React y me encontré con un problema en el que cada vez que uso ref.on('child_added'...) obtengo un bucle infinito. Sé que este no debería ser el caso, ya que si ref.on solo representará algo si se agrega un elemento secundario a un nodo. Mi código está abajo.

 useEffect(()=> { //Depending on what user you want to chat with, set the chatroom if ((props.who)>(auth.currentUser.uid)) { setChatroom(props.who + auth.currentUser.uid); } else { setChatroom(auth.currentUser.uid + props.who); } let ref = db.ref(`Messages/${chatroom}`); //Loop over all the messages and store them in the messages array to display ref.on('value', (snapshot) => { let newUserState = []; snapshot.forEach(data => { newUserState.push(data.val()); }) setMessages(newUserState); }); },[chatroom,props.who]) let ref = db.ref(`Messages/${chatroom}`); ref.on('child_added', (snapshot) => { setMessages([...messages,snapshot.val()]); });

La variedad de mensajes con los que trabajo es lo que finalmente se representa al final. La primera declaración de uso y efecto se usa para agregar todos los mensajes de chat con un usuario en particular al hacer clic en el chat con ese usuario (la matriz solo se actualiza al elegir interactuar con ese usuario). El código debajo solía agregar un mensaje a una matriz solo si la base de datos se actualizaba con un mensaje.