我們是否應該在 firebase 中使用 Auth.onAuthStateChanged() 返回的取消訂閱方法來清理內存泄漏？

Question

這是我的代碼：

import React, {useState, useRef, useEffect} from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
import Spinner from '../components/Spinner';

const CreateListing = () => {
  const [geoLocationEnabled, setGeolocationEnabled] = useState(true);
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
      type: 'rent',
      name: '',
      bedrooms: 1,
      bathrooms: 1,
      parking: false,
      furnished: false,
      address: '',
      offer: false,
      regularPrice: 0,
      discountedPrice: 0,
      images: {},
      latitude: 0,
      longitude: 0
  });

  const auth = getAuth();
  const navigate = useNavigate();
  const isMounted = useRef(true);

  useEffect(() => {
    if (isMounted.current) {
      onAuthStateChanged(auth, (user) => {
        if (user) {
          setFormData({
            ...formData,
            userRef: user.uid
          });
        }
        else {
          navigate('/sign-in');
        }        
      });                              
    }
    return () => {
      isMounted.current = false;
    }  
  }, []);

  if (loading) {
    return <Spinner />
  }

  return (    
    <div>CreateListing</div>
  )
}
export default CreateListing

我收到此錯誤：

React Hook useEffect 缺少依賴項：“auth”、“formData”和“navigate”。 要么包含它們，要么刪除依賴數組。 如果您在“setFormData”調用中只需要“formData”，也可以進行功能更新“setFormData（f => ...）”react-hooks/exhaustive-deps

為了解決它，我在 useEffect 數組中添加了 isMounted 作為依賴項，並在依賴項數組行上方添加了// eslint-disable-next-line行。 這確實解決了警告，一切正常。 但是，這段代碼仍然存在問題。 即使，當組件卸載時，onAuthStatus 偵聽器實際上仍在運行，但它無法做任何事情。

我找到了一個更好的解決方案，它指出 onAuthStatus() 返回一個可以在 useEffect 的返回函數中調用的取消訂閱方法。 這將確保偵聽器確實被取消訂閱，並且在組件卸載時確實會導致任何內存泄漏。

onAuthStatus 文檔的鏈接是：

https://firebase.google.com/docs/reference/js/auth.auth.md#authonauthstatechanged

另外，請注意，當我單擊退訂鏈接時，在 Returns: 下，我收到 404 錯誤...這是不尋常的

我認為以下解決方案應該更好，但我不確定：

useEffect(()=>{
    const unsub = onAuthStateChanged(auth, (user)=>{
        if (user) {
          setFormData({
            ...formData,
            userRef: user.uid
          });
        }
        else {
          navigate('/sign-in');
        }
    });

    return unsub();
},[]);

有人可以指導我這種方法嗎？ 如果有更好的解決方案，請分享...在此先感謝您。

Answer 1

你在做什么應該沒問題。 盡管在全局級別為整個應用程序設置一個偵聽器是完全可以的（沒有鈎子）。 那個聽眾並沒有真正“泄漏”任何東西。 只要用戶的狀態發生變化，它就會不斷被調用，因此您可以決定在發生這種情況時對整個應用程序執行什么操作。