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