Hooks asynchrones et hooks non asynchrones pour obtenir des données

Question

J'ai construit un crochet personnalisé :

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;
};

Je peux l'utiliser dans mon composant comme ceci :

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

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

Je peux également supprimer l'async dans le hook personnalisé :

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;
};

...et utilisez-le dans mon composant comme ceci :

const myData = useFirestoreCollection('registeredUsers')

J'ai essayé de trouver la meilleure façon mais je n'y suis pas parvenu.

Quand devriez-vous utiliser un mot-clé asynchrone dans les hooks et quand ne devriez-vous pas le faire ?

Answer 1

Je n'ai jamais vu de situation où un hook devrait être asynchrone. Le hook renvoie désormais une promesse au lieu des seules fonctions state et setState que vous souhaitez que le composant utilise. Cela constituerait un anti-modèle majeur et rendrait la simplicité du crochet très compliquée.

Si vous devez utiliser la fonctionnalité async/wait dans un hook, vous pouvez y déclarer une fonction async. Tout comme vous.

La deuxième méthode est évidemment la bonne façon de procéder.

Answer 2

Dans le premier cas, rendre le hook asynchrone ne sert à rien car il n'y a rien d'asynchrone dans le hook, seulement à l'intérieur useEffect .

Cela rend son utilisation plus difficile et vous fait répéter des états.