非同步鉤子與非非同步鉤子獲取數據

Question

我已經建立了一個自訂鉤子：

const useFirestoreCollection = async (collectionName) => {

    const [documents, setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const documentsData = [];
            querySnapshot.forEach((doc) => {
                documentsData.push({
                    id: doc.id,
                    ...doc.data(),
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }, []);

    return documents;
};

我可以在我的元件中像這樣使用它：

const [myData, setMyData] = useState([]);

useFirestoreCollection('registeredUsers')
    .then((data) => {
        setMyData(data); // Data Access
    })
    .catch((error) => {
        console.log(error); // Error
    });

我還可以刪除自訂掛鉤中的非同步：

const useFirestoreCollection = (collectionName) => { <- ASYNC DELETED
    const [documents, setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const documentsData = [];
            querySnapshot.forEach((doc) => {
                documentsData.push({
                    id: doc.id,
                    ...doc.data(),
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }, []);
    return documents;
};

...並在我的元件中像這樣使用它：

const myData = useFirestoreCollection('registeredUsers')

我試著找出最好的方法，但沒能做到。

什麼時候應該在鉤子中使用 async 關鍵字，什麼時候不應該使用？

Answer 1

我從未見過鉤子應該是異步的情況。該鉤子現在會傳回承諾，而不僅僅是您希望元件使用的 state 和 setState 函數。這將是一個主要的反模式，並使鉤子的簡單性變得非常複雜。

如果您需要在掛鉤中使用非同步/等待功能，則可以在其中宣告非同步函數。就像你所做的那樣。

第二種方法顯然是執行此操作的正確方法。

Answer 2

在第一種情況下，使鉤子非同步是沒有用的，因為鉤子中沒有任何非同步內容，僅在 useEffect 內部。

這使得它更難以使用並且使您重複狀態。