'React Native memory leak error after updating to Firebase version 9 onValue

I'm going through to update my code for the Firebase version 9 modular form. I am now using onValue. From what I'm reading it returns a function that removes the listener. But I'm still not doing it right because although it functions well at first, when I change the database on the backend with the app open I get the "can't perform a react state update on an unmounted component" error when I'm in a different app screen. See old and new code below please.

OLD CODE:

useEffect(() => {
  loadListings();
},[]);

const loadListings = async () => {  
  setLoading(true);
  updateInput('');
  let testData = [];
  let searchData = [];
  db.ref('deals').once('value', (snapshot) =>{
    snapshot.forEach((child)=>{
      testData.push({
        id: child.key,
        title: child.val().hasOwnProperty('title') ? child.val().title : 'NA',
      })
      searchData.push(
        child.val().title
      )
    }) 
  })
  .then(()=>{
    checkMessages(testData);
    setLoading(false);
  })
  .catch((error) => Sentry.Native.captureException('Error MessagesScreen function loadListings 1 ' + error));
}

NEW CODE:

useEffect(() => {
    loadListings();
  },[]);

const loadListings = async () => {  
  setLoading(true);
  updateInput(''); 
  const dbRef = ref(db, 'deals');
  return onValue(dbRef , (snapshot) => {
    let testData = [];
    let searchData = [];
    let storeData = filterStores;
    snapshot.forEach((childSnapshot)=>{
      testData.push({
        id: childSnapshot.key,
        title: childSnapshot.val().hasOwnProperty('title') ? childSnapshot.val().title : 'NA',
      })
    }) 
    checkMessages(testData);
    setLoading(false);
  })
} 

After receiving answer below I changed the useEffect to this instead and now it works:

  useFocusEffect(
    React.useCallback( () => {
      async function fetchData() {
        // You can await here
        const response = await loadListings();
        // ...
        return () => response();
      }
      fetchData();
    }, [])
  );


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source