J'utilise beaucoup les instantanés Firestore dans mon application React Native. J'ai également utilisé des hooks React. Le code ressemble à ceci :

useEffect(() => { someFirestoreAPICall().onSnapshot(snapshot => { // Lors du chargement initial du composant, ajoutez toutes les données chargées à l'état. // Lorsque les données sur Firestore changent, nous recevons des mises à jour dans ce rappel, // Puis mettez à jour l'interface utilisateur en fonction de l'état actuel });; }, []);

Au début, je pensais que useState était le meilleur crochet pour stocker et mettre à jour l'interface utilisateur. Cependant, selon les paramètres de mon hook useEffect, qui est fourni avec un tableau de dépendances vide, lorsque le rappel d'instantané est déclenché et que j'essaie de modifier l'état actuel avec de nouvelles modifications, l'état actuel n'est pas défini. . Je pense que cela est dû aux fermetures. J'ai pu résoudre ce problème en utilisant useRef et forceUpdate()

const dataRef = useRef(initialData); const [, updateState] = React.useState(); const forceUpdate = useCallback(() => updateState({}), []); useEffect(() => { someFirestoreAPICall().onSnapshot(snapshot => { // Si des données d'instantané sont ajoutées dataRef.current.push(newData) Forcer la mise à jour() //Si les données de l'instantané sont mises à jour dataRef.current.find(e => certaines conditions) = updateData Forcer la mise à jour() });; }, []); retour( // JSX utilisant dataRef.current ) 
Ma question est la suivante : est-ce que j'utilise correctement useRef et forceUpdate différemment de useState J'ai l'impression que mettre à jour le hook useRef et appeler forceUpdate() En essayant d'utiliser useState, j'ai essayé d'ajouter la variable d'état au tableau de dépendances, mais cela a entraîné une boucle infinie. Je souhaite initialiser la fonction d'instantané une seule fois et souhaite que les données avec état du composant soient mises à jour au fil du temps à mesure que le backend change (déclenché dans le rappel onSnapshot).