使用 React Hooks 限制 Firebase 次重新渲染

Question

I have a Firebase Realtime Database and I want to display the records by mapping a list.

So far I have:

useEffect(() => {
        dbRefObject.on('value', snap => getRecords(snap.val()))
      }, [dbRefObject, records])

And elsewhere I have:

export const dbRefObject = firebase.database().ref().child('record');

My getRecords() function is:

const getRecords = (snap) => {
        let _recordsMap= []
        for (let record in snap) {
            _recordsMap.push({[record] : snap[record]})
        }

I want some kind of behaviour like an unsubscribe() function returned by the useEffect, but I can't get this to work?

useEffect(() => {
        const unsubscribe = () => {dbRefObject.on('value', snap => getRecords(snap.val()))}
        return () => {
            unsubscribe()
        }
      }, [dbRefObject, records])

Answer 1

you need to call dbRefObject.off("value", originalCallback);

check https://firebase.google.com/docs/database/admin/retrieve-data#section-detaching-callbacks