How to using onChildAdded in useEffect react native

user_19648949 0
Viewed 49

I'm doing a simple app chat with react native and firebase realtime database. I listening database change equal function onChildAdded(). It not work when I put the function inside useEffect(), but when I put it outside useEffect was it work. How to put onChildAdded inside useEffect but still work. Thank you so much!

function inside useEffect()

function outside useEffect()

firebase database

my code here function inside useEffect()

it return value the first time render

useEffect(() => {
getMessages(ROOM_ID, (messages) => {
  setData(messages);
});
const refToRoom = ref(getDatabase(app), `messages/room_${ROOM_ID}`);
const myQuery = query(refToRoom);
onChildAdded(
  myQuery,
  (data) => {
    console.log(data);
  },
  (error) => {
    console.log(error);
  }
);
return offMessagesChange(ROOM_ID);}, []);

when function outside useEffect it return value when data added

  useEffect(() => {
getMessages(ROOM_ID, (messages) => {
  setData(messages);
});
return offMessagesChange(ROOM_ID);}, []);
  const refToRoom = ref(getDatabase(app), `messages/room_${ROOM_ID}`);
  const myQuery = query(refToRoom);
 onChildAdded(
myQuery,
(data) => {
  console.log(data);
},
(error) => {
  console.log(error);
});
firebase react-native
1 Answers

May be this will be helpful


useEffect(() => {
getMessages(ROOM_ID, (messages) => {
  setData(messages);
});
const refToRoom = ref(getDatabase(app), `messages/room_${ROOM_ID}`);
const myQuery = query(refToRoom);

// wrap your function inside setTimeout
 setTimeout(() => {

  onChildAdded(
  myQuery,(data) => {
    console.log(data);
  },
  (error) => {
    console.log(error);
  }
);
return offMessagesChange(ROOM_ID);
  }, 1000) //add this ,1000 mean 1 second delay.
}, []);
user_196193290
Related