データを取得するための非同期フックと非同期フック

Question

カスタムフックを作成しました:

const useFirestoreCollection = async (コレクション名) => {

    const [ドキュメント、setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const ドキュメントデータ = [];
            querySnapshot.forEach((doc) => {
                ドキュメントデータ.push({
                    ID: ドキュメントID、
                    ...doc.data()、
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }、[]);

    書類を返却する。
};

これをコンポーネントで次のように使用できます:

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

useFirestoreCollection('登録ユーザー')
    .then((データ) => {
        setMyData(data); // データアクセス
    })
    .catch((エラー) => {
        console.log(error); // エラー
    });

カスタムフックの async を削除することもできます:

const useFirestoreCollection = (コレクション名) => { <- 非同期削除
    const [ドキュメント、setDocuments] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const querySnapshot = await getDocs(collection(db, collectionName));
            const ドキュメントデータ = [];
            querySnapshot.forEach((doc) => {
                ドキュメントデータ.push({
                    ID: ドキュメントID、
                    ...doc.data()、
                });
            });
            setDocuments(documentsData);
        };
        fetchData();
    }、[]);
    書類を返却する。
};

...そして、次のようにコンポーネントで使用します:

const myData = useFirestoreCollection('登録ユーザー')

最善の方法を見つけようとしましたが、できませんでした。

フック内で async キーワードを使用する必要があるのはどのような場合、使用すべきでないのはどのような場合ですか?

Answer 1

フックが非同期であるべき状況を見たことがありません。フックは、コンポーネントで使用する state 関数と setState 関数だけではなく、Promise を返すようになりました。これは大きなアンチパターンであり、フックのシンプルさが非常に複雑になります。

フック内で async/await 機能を使用する必要がある場合は、その中で async 関数を宣言できます。あなたと同じように。

2 番目の方法は明らかにこれを行う正しい方法です。

Answer 2

最初のケースでは、フックには非同期のものは何もなく、useEffect 内にのみ存在するため、フックを非同期にすることは役に立ちません。

これにより、使用が困難になり、状態が複製されます。