React Firebase useEffect cleanup example

useEffectCleanup.js

import React, { useState, useEffect, useRef, useCallback } from 'react';

const mountedRef = useRef(true);

const fetchData = useCallback(async () => {
  try {
    // do your async call here
    const ref = await db
      .collection('stuff')
      .where('stuff', '==', id)
      .get();
    const data = ref.docs.map(doc => ({ id: doc.id, ...doc.data() }));
    // if it is not mounted yet/anymore, break out
    if (!mountedRef.current) return null;
    // then do the data set (which will trigger the rerender and could cause the leak
    setRedeems(data);
    setIsFetching(false);
  } catch (error) {
    console.log(error);
  }
}, [mountedRef]);

useEffect(() => {
  fetchData();
  return () => {
    mountedRef.current = false;
  };
}, [fetchData]);