En mi aplicación nativa de reacción, los usuarios pueden marcar como favoritos los elementos que almaceno en AsyncStorage. Visualmente muestro esto en la pantalla y hago un seguimiento de eso usando la variable useState. Cuando el usuario navega y luego regresa, uso el gancho useEffect y llamo a AsyncStorage para validar si el elemento es un favorito. Si es cierto, actualicé la variable useState. Esto funciona, pero cuando regresan, el botón de favoritos muestra el valor predeterminado (falso) durante una fracción de segundo mientras el elemento se busca en AsyncStorage, lo cual no es óptimo. ¿Hay alguna forma de evitar este retraso?

 import React, { useState, useEffect } from "react"; //async storage functions import storage from "../../utility/storage"; //count context for use in other screens import { useCounter } from "../../contexts/FavoritesCountContext"; function ItemDetails(props) { const [isFav, setIsFav] = useState(false); const { increment, decrement } = useCounter(); const checkFavStatus = async () => { try { //name passed in through props const fav = await storage.isFavorited(name); setIsFav(fav); } catch (error) { console.log(error); } }; useEffect(() => { checkFavStatus(); }, [isFav]); async function handleFavorite() { if (isFav) { await storage.remove(name); setIsFav(false); decrement(); } else { await storage.store(name); setIsFav(true); increment(); } } return ( <Screen> <TouchableOpacity onPress={handleFavorite}> <FavButton name={"heart"} size={250} iconColor={isFav ? red : white} backgroundColor={"transparent"} /> </TouchableOpacity> </Screen> ); }