Encontré un error extraño en React el otro día y esta es la versión simplificada.
let count = 0; export default function App() { const [countState, setCountState] = useState(count); const [countState2, setCountState2] = useState(count); const increaseCount1 = () => ++count; const handleClick = () => { setCountState(() => increaseCount1()); }; const handleClick2 = () => { setCountState2(() => countState2 + 1); }; return ( <div className="App"> <h1>{countState}</h1> <button onClick={handleClick}>Btn1</button> <div> <h1>{countState2}</h1> <button onClick={handleClick2}>Btn2</button> </div> </div> ); }Aquí está la demostración en vivo https://codesandbox.io/s/side-effect-ryfwr
cuando se hace clic en Btn1 , countState aumentará en 2, no en 1, mientras que cuando se Btn2 clic en Btn2, countState2 aumentará en 1, lo que se esperaba. Estaba luchando por entender qué causó que countState aumentara en 2. Luego descubrí que tiene algo que ver con el modo estricto de React. Se menciona en el artículo que las funciones pasadas a useState, useMemo o useReducer se pueden invocar por duplicado para detectar efectos secundarios. Dado eso, creo que lo que he pasado en setCountState es un efecto secundario, es decir, setCountState(() => increaseCount1());
Pero todavía no entiendo muy bien por qué setCountState(() => increaseCount1()); es un efecto secundario mientras setCountState2(() => countState2 + 1); está bien. Necesito un modelo mental. ¿Alguien puede ayudarme a entender esto más profundamente?
Para ver cómo funciona la mutación, o cómo se expone, comparemos ambas implementaciones.
Primer ejemplo:
const increaseCount1 = () => ++count; const handleClick = () => { setCountState(() => increaseCount1()); };
Supongamos que countState y count son 0 , cuando React double invoca setCountState esto es lo que ocurre:
setCountState(() => increaseCount1()); // (1) increaseCount1 invoked // (2) ++count -> count incremented from 0 to 1 // (3) setCountState called with 1 setCountState(() => increaseCount1()); // (1) increaseCount1 invoked // (2) ++count -> count incremented from 1 to 2 // (3) setCountState called with 2 El resultado es countState ahora es 2 .
Segundo ejemplo:
const handleClick2 = () => { setCountState2(() => countState2 + 1); };
Supongamos que countState2 y count son 0 , cuando React double invoca setCountState2 esto es lo que ocurre:
setCountState2(() => countState2 + 1); // (1) countState2 + 1 = 0 + 1 = 1 // (2) setCountState2 called with 1 setCountState2(() => countState2 + 1); // (1) countState2 + 1 = 0 + 1 = 1 // (2) setCountState2 called with 1 El resultado es countState2 ahora es solo 1 .
Cuando el siguiente estado depende necesariamente del estado anterior , debe usar una actualización de estado funcional que haga referencia al estado anterior (pasado como argumento). Incrementar un conteo es el ejemplo prototípico real de React para actualizaciones de estado funcional.
setCount(count => count + 1)Aquí, el siguiente recuento se incrementa a partir del valor del estado anterior.