Passing snapshot to an outer function and receiving data from it

Question

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?

Answer 1

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]);