Passing snapshot to an outer function and receiving data from it

user_9856049 0
Viewed 81

I'm using Firebase here but my question is more general, and not related to Firebase (I think)

Firebase has a snapshot function that serves has a listener for changes:

import { getDatabase, ref, onValue} from "firebase/database";

const db = getDatabase();
const starCountRef = ref(db, 'posts/' + postId + '/starCount');
onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  updateStarCount(postElement, data);

});

I'm trying to put that logic in a separate function and receive my changes in my component. The outer function:

export function messagesListener() {
  const db = getDatabase();
  const messagesRef = ref(db, "messages");
  return onValue(messagesRef, (snapshot) => {
    console.log('THERE HAS BEEN A CHANGE');
    const data = snapshot.val();
  });
}

And in my component:

  useEffect(() => {
    const listener = messagesListener();
  }, []);

But that's incorrect (I don't know how to use that listener to retrieve new data form the snapshot when there is a change). What would be a correct way to do it so that I receive data from the snapshot that resides in that messagesListener function?

reactjs javascript
1 Answers

You may try creating a custom hook for that:

function useValueUpdate() {
 const [value, setValue] = useState();
 
 const db = getDatabase();
 const starCountRef = ref(db, 'posts/' + postId + '/starCount');
 onValue(starCountRef, (snapshot) => {
  const data = snapshot.val();
  setValue(data);
 });

 return value;
}

so that it can be used in a component like this:

const dbValue = useValueUpdate();
useEffect(() => {...}, [dbValue]);
user_7097110
Related