quiero usar useMemo en lugar de un estado local usando javascript, react y graphql.
¿Qué estoy tratando de hacer?
Estoy mostrando una barra de progreso basada en los datos obtenidos de la consulta de progreso. los datos obtenidos de la consulta de progreso se establecen en un estado.
a continuación se muestra el código,
const ProgressModal = (status) => { const [progress, setProgress] = React.useState<>(undefined); //progress state //setting const { data: progressData, stopPolling: stopPolling } = useCheckProgressQuery({ variables: {id}, pollInterval: 3000, }) React.useEffect(() => { if (status === initial) { setProgress(undefined); } if (status===started) { setProgress(progressData); } if (status === finished && completed >= total || status === failed) { stopPolling(); setProgress(undefined); } }, [progress, progressData, setProgress]); const completed= progress ? progress.Progress.completed : 0; const total = progress ? progress.Progress.total : 0; let value = 0; if (completed > 0 && total > 0) { value = (completed / total) * 100; } return ( <ProgressBar value = {progress} /> ); }el código anterior funciona, pero ¿cómo puedo usar useMemo para el caso anterior en lugar de un estado local? Podría alguien ayudarme con esto. Soy nuevo en el uso de ganchos de reacción. Gracias.
useMemo y useState con useEffect hacen cosas diferentes, por lo que no puede convertir useState/useEffect 100 % por igual a useMemo .
Un enfoque useMemo más o menos equivalente sería este (pero no funciona, entonces también sería necesaria otra refactorización, ver más abajo):
const progress = useMemo(() =>{ if( status === initial ){ return undefined; } if( status===started ){ return progressData; } if( status === finished && completed >= total || status === failed ){ return undefined); } return undefined; // <-- you need to define default/fallback }, [ progressData, status, completed, total ] // <-- some where missing in your example );Esta no es una solución funcional, se requiere más refactorización:
stopPolling() no se llama, lo que necesita un useEffect adicional ahora.progress depende de completed y total , y completed / total ambos dependen del progress (dependencias circulares)