Tengo una lista de componentes en una pantalla. Cada componente hace un cálculo sobre useEffect. Entonces espero actualizar tan pronto como terminen cada cálculo, pero en cambio, todos se actualizan después de que se completan todos los cálculos.
¿Qué estoy haciendo mal?
Ejemplo de componente:
import React, {useEffect, useState} from 'react'; import {View, Text} from 'react-native'; const Teste = () => { const Item = props => { const [tempo, setTempo] = useState('calculando...'); useEffect(() => { const inicio = new Date(); const rdm = Math.random(); sleep(rdm * 1000 + 2000); setTempo(`${new Date() - inicio} millisegundos`); }, []); const sleep = milliseconds => { const date = Date.now(); let currentDate = null; do { currentDate = Date.now(); } while (currentDate - date < milliseconds); }; return ( <View style={{marginBottom: 20}}> <Text>Item {props.nome}</Text> <Text>Tempo - {tempo}</Text> </View> ); }; return ( <View style={{padding: 40}}> <Item nome="1" /> <Item nome="2" /> <Item nome="3" /> </View> ); }; export default Teste;Dos problemas aquí...
sleep , literalmente ni siquiera puedoItem dentro de su componente Teste , lo que significa que cada vez que Teste renderiza, Item se redefine Sugiero mover Item fuera de Teste y usar un sueño basado en promesas
const sleep = (ms) => { let timer; const promise = new Promise(r => { timer = setTimeout(r, ms); }); return [ promise, () => { clearTimeout(timer); } ]; }; const Item = ({ nome }) => { const [tempo, setTempo] = useState('calculando...'); useEffect(() => { const inicio = new Date(); const rdm = Math.random(); const [ delay, cancel ] = sleep(rdm * 1000 + 2000); delay.then(() => { setTempo(`${new Date() - inicio} millisegundos`); }); return cancel; // make sure timeout is cleared on unmount }, []); return ( <View style={{marginBottom: 20}}> <Text>Item {nome}</Text> <Text>Tempo - {tempo}</Text> </View> ); }; const Teste = () => ( <View style={{padding: 40}}> <Item nome="1" /> <Item nome="2" /> <Item nome="3" /> </View> ); Aquí sleep() devuelve tanto una promesa que se resuelve una vez que el tiempo de espera ha expirado como una función para cancelar el retraso si su componente está desmontado.