import { useState } from "react"; export default function App() { console.log("rendered...") const [count, setCount] = useState(0); const increaseCount = () => { setCount(count + 1); }; const setFourValue = () => { setCount(4); }; return ( <div className="App"> <div style={{ display: "flex", alignItems: "center", columnGap: ".25rem" }} > <button onClick={increaseCount}>Increase</button> <button onClick={setFourValue}>Set 4</button> <span>{count}</span> </div> </div> ); }Intento averiguar cuándo y cómo se procesan los componentes. La situación que intento es aumentar el conteo a 4 y ahora mi valor de conteo es 4. Pero hago clic en el botón 'Establecer 4', mi valor de conteo sigue siendo 4 pero aún se vuelve a renderizar el componente. Después de eso, si hace clic nuevamente en el componente del botón 'Establecer 4', no se vuelve a procesar. Por qué ?
Para agregar a la respuesta de Barry, cuando establece el conteo en 4 la primera vez con setFourValue después de increaseCount a 4 con IncreaseCount , en realidad no es 4. Consola registra el conteo y verás que en realidad es 3 a pesar de que muestra 4 en la pantalla.
En React, los componentes solo se volverán a renderizar si cambia un state o prop en el componente.
Establecer 4 a 4 no es un cambio.
React es lo suficientemente inteligente como para no volver a renderizar innecesariamente.
Hay un problema con su función de increaseCount de recuento. Cuando está actualizando una propiedad de estado usando su valor anterior, se debe usar el argumento de devolución de llamada. Esto se debe a la naturaleza asíncrona de las actualizaciones de estado. (Ver https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous )
const increaseCount = () => { setCount((count) => (count + 1)); }; Probablemente podría ser la razón por la cual el count fue 3 en lugar de 4 como dijo @Tim van Dam.