Estoy usando Firebase aquí, pero mi pregunta es más general y no está relacionada con Firebase (creo)
Firebase tiene una función de instantánea que sirve como detector de cambios:
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); });Estoy tratando de poner esa lógica en una función separada y recibir mis cambios en mi componente. La función exterior:
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(); }); }Y en mi componente:
useEffect(() => { const listener = messagesListener(); }, []);Pero eso es incorrecto (no sé cómo usar ese oyente para recuperar nuevos datos de la instantánea cuando hay un cambio). ¿Cuál sería una forma correcta de hacerlo para recibir datos de la instantánea que reside en esa función de MessageListener?
Puede intentar crear un gancho personalizado para eso:
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; }para que pueda ser utilizado en un componente como este:
const dbValue = useValueUpdate(); useEffect(() => {...}, [dbValue]);