¿Por qué react no realiza un renderizado para actualizar la vista, si
el valor de la variable de estado está siendo editado?, ¿Será que
react necesita obligatoriamente la llamada a setCounter?
Sí, estás en lo correcto, te recomiendo leer sobre el estado y ciclo de vida de React y te cito este pedazo relacionado a hooks:
En una clase, necesitamos llamar a this.setState() para actualizar el
estado count: ... En una función ya tenemos setCount y count como
variables, así que no necesitamos this...
Los componentes de react tiene un ciclo de vida definido: el montaje, la actualización y el desmontaje. En ellos existen fases de renderizado, en los cuáles React decide como actualizar tu DOM y por lo tanto re-renderizar los items del mismo en caso de que sea necesario.
En este caso, para que React sepa cuando realizar este análisis del DOM y renderizar, debes de indicarle que vas a cambiar el estado del componente por medio de setState()
(componente clase) o useState()
(componente funcional con hooks
). En otras palabras, la única manera en que React sepa cuando re-renderizar es que tu se lo indiques con estos métodos (hay otros métodos que también fuerzan el renderizado y son parte del ciclo de vida del componente).
No es recomendado que cambies el valor de la variable de estado counter
si no es por el método provisto por el hook
(en tu caso setCounter
), ya que vas a tener incongruencias en tu elemento y además si el elemento puede funcionar de esta manera podría hasta llegar a considerarse que la variable counter
no corresponde a un estado real del mismo (ya que no depende de el porque no produce un re-renderizado).
Y ademas, suponiendo que dentro de esa fución llamo a una función más, cuyo flujo depende del valor de counter.value, puedo confiar en que el valor leído por la función 2 será el valor almacenado en memoria?
Tu estás encargado de dar la congruencia entre lo que se renderiza en tu elemento y el estado que tiene... UseState
te va a permitir mantener el valor de la variable que utilizas entre renders en componentes funcionales, por lo tanto si, si puedes confiar en ese valor. Esto también puedes comprobarlo porque si creas una variable local en la función se va a resetear entre renders, necesitas usar UseState
para obtener una referencia persistente entre renders.
¿incluso si react no realiza el renderizado?
Sí, mira este ejemplo que hice basado en el código que compartiste con el link:
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [counter, setCouner] = useState({ value: 0 });
const [flag, setFlag] = useState(false);
const updateCounter = () => {
console.log(counter.value);
counter.value++;
if(counter.value%5===0){
document.querySelector("#oli").innerText = counter.value;
setFlag(!flag);
}
};
return (
<div className="App">
<h1> You have clicked {counter.value} times </h1>
<button onClick={updateCounter}>Increase counter</button>
<h1>
You have clicked <div id="oli" /> times
</h1>
<h4>{JSON.stringify(counter)}</h4>
</div>
);
}
En este caso el componente se renderiza cada 5 clicks en el botón, pero aunque no se esté re-renderizando se mantiene el valor anterior de tu variable contador.
Es decir, supongamos que realizo una peticion axios cuando el contador llegue a 50.
En este caso puedes hacer la petición justo antes o después de utilizar el setCounter
, el hecho de que ya tengas el valor para cambiar el estado por medio de este método te permite evaluar si haces el request.
Por ejemplo, imagina que tienes un botón en un elemento de react para incrementar un contador y que efectivamente llegue a 50 y realize un request de datos, entonces, harías algo cómo así:
<button onClick = {incrementarContador}>Incrementar </button>
const incrementarContador = async() => {
if (counter + 1 === 50) {
let data = await axios(...);
}
setCounter(counter + 1);
}
En el caso del código que compartiste en el link, el único motivo por el cuál se está re-renderizando el elemento es porque al usar setFlag()
estás indicándole a React que algo cambio y que debe de hacer un nuevo render en el elemento. El valor de counter
podría cambiar a como tu quieras, así como estás haciendo en este ejemplo (haciendo countercopy.value++
, que cómo tu mismo dices es equivalente a counter.value++
por que los objetos en javascript se manejan por referencia), lo único que sucede es que React no lo va a renderizar porque no va a saber que cambió (hasta que hagas setCounter()
o setFlag()
por ejemplo).