3

resulta que estoy desarrollando una aplicación y me he topado con un comportamiento curioso en el manejo de estadoscon hooks. Primero que nada quiero aclarar que entiendo la diferencia entre variable de valor y variable, es decir que entiendo como funciona el siguiente código.

let a = 10,b={index:'value'};
let c = a, d = b;
c++; // en este punto a = 10 y c = 11
d.index = 'value2'; // en este punto d y b apuntan al mismo objeto, por lo que ambos tendran un valor de value2 en el indice index.

Ahora bien, mi duda es la siguiente. Suponiendo que tengo el siguiente fragmento de código.

const [counter, setCouner] = useState({ value: 0 });

y luego en alguna función, asociada por ejemplo al click sobre un boton, tengo el siguiente codigo

let countercopy = counter;
countercopy.value++;

¿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?

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? ¿incluso si react no realiza el renderizado? Es decir, supongamos que realizo una peticion axios cuando el contador llegue a 50.

Adjunto un codigo de ejemplo escrito en codesandbox.

Link del código: https://codesandbox.io/s/quizzical-cherry-olvf8?file=/src/index.js

1 respuesta 1

3

¿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).

3
  • 1
    Ecelente explicación, has aclarado las dudas que tenía. Ya estaba consciente de que el ejemplo actualizaba la vista por el uso de setFlag, pero tu explicación detallada ha dado en el clavo. Muchas gracas!!
    – Fernando
    el 7 ene. 2021 a las 15:24
  • 1
    Segun lo explicado por tu resuesta, deberia usar solo variables de estado cuyo valor sea renderizado de lguna mnera, de está forma al actualzar el estado la vista debería ser actualizada tambien. Siguiendo esto, cómo debería manejar u variable que ocupo en distintas fuciones, pero que no necesito que su valor sea mostrado en la vista, deberia ser una simple variable global???
    – Fernando
    el 7 ene. 2021 a las 16:40
  • @Fernando He estado tratando de pensar en alguna variable que no ocupe renderizar, que no se necesite pasar por un prop o que no venga de algún contenedor de estado de tu aplicación (como Redux) como una store y no se me ocurre ningún ejemplo concreto. Sin embargo, si llegases a necesitar una variable que no genere re-renderizado y estás usando un componente funcional si necesitarías utilizar useState para que react guarde su valor entre renders. Voy a editar la respuesta tomando esto en cuenta, gracias por la pregunta, tengo que investigar esto.
    – FranAcuna
    el 7 ene. 2021 a las 20:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.