Estoy probando los nuevos React Hooks y tengo un componente Clock con un contador que se supone que aumenta cada segundo. Sin embargo, el valor no aumenta más allá de uno.
function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>El motivo es que la devolución de llamada pasada al cierre de setInterval solo accede a la variable de time en el primer procesamiento, no tiene acceso al nuevo valor de time en el procesamiento posterior porque useEffect() no se invoca la segunda vez.
time siempre tiene el valor 0 dentro de la devolución de llamada setInterval .
Al igual que setState con el que está familiarizado, los ganchos de estado tienen dos formas: una en la que toma el estado actualizado y la forma de devolución de llamada en la que se pasa el estado actual. Debe usar la segunda forma y leer el último valor de estado dentro de setState devolución de llamada para asegurarse de que tiene el valor de estado más reciente antes de incrementarlo.
Bonificación: enfoques alternativos
Dan Abramov, profundiza en el tema del uso de
setIntervalcon ganchos en su publicación de blog y proporciona formas alternativas de solucionar este problema. ¡Recomiendo leerlo!
function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(prevTime => prevTime + 1); // <-- Change this line! }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div>La función useEffect se evalúa solo una vez en el montaje del componente cuando se proporciona una lista de entrada vacía.
Una alternativa a setInterval es establecer un nuevo intervalo con setTimeout cada vez que se actualiza el estado:
const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = setTimeout(() => { setTime(time + 1); }, 1000); return () => { clearTimeout(timer); }; }, [time]); El impacto en el rendimiento de setTimeout es insignificante y generalmente se puede ignorar. A menos que el componente sea sensible al tiempo hasta el punto en que los tiempos de espera recién establecidos causen efectos no deseados, los setInterval y setTimeout son aceptables.