Debido a que este componente cambia con frecuencia, decidí usar useRef para almacenar valores (por ejemplo, un contador). En un evento (como onclick), el registro muestra que el número se incrementó en 1 cada vez que se hizo clic en el botón, pero el valor no se actualiza en la pantalla (dentro del div). Muestra 0. ¿Que me estoy perdiendo aqui?

Salida prevista: al hacer clic en el botón, add() aumenta counter y muestra el valor en <div>.

const counter = useRef(0);

function add() {
  counter.current += 1;
  console.log(counter.current); // this shows that the number did increment 
}

return (
  <div>
    <div>{counter.current}</div> {/* this shows '0' */}
    <button onClick={() => add()}>Add</button>
  </div>
);
0
Jingles 23 jun. 2020 a las 16:21

2 respuestas

La mejor respuesta

Como dijiste en los comentarios:

Estoy interactuando con esta variable en funciones de escucha de bibliotecas de terceros. Estas bibliotecas se cargan en la carga de la página y reciben eventos del escucha de JavaScript.

Significa que desea renderizar el componente en un cambio de referencia de terceros, generalmente se burla de un render de esta manera:

const reducer = p => !p;

const App = () => {
  const counter = useRef(0);
  const [, render] = useReducer(reducer, false);

  function add() {
    // Some 3rd party ref
    counter.current += 1;

    // Render and update the UI
    render();
  }

  return (
    <div>
      <div>{counter.current}</div>
      <button onClick={() => add()}>Add</button>
    </div>
  );
};

Edit exciting-architecture-fu0s6

1
Dennis Vash 23 jun. 2020 a las 13:38

Lea el doc

Tenga en cuenta que useRef no le notifica cuando cambia su contenido. La mutación de la propiedad .current no causa una nueva representación. Si desea ejecutar algún código cuando React adjunta o desconecta una referencia a un nodo DOM, puede utilizar una referencia de devolución de llamada.

Usar useState es lo mejor en nuestro caso

0
Kalhan.Toress 23 jun. 2020 a las 13:34