Como armazenar um valor num componente sem chamar uma re-renderização?

No React, para armazenar um valor num componente sem provocar uma re-renderização, pode usar o hook useRef. O valor armazenado em useRef persiste entre renderizações, mas a sua alteração não provoca uma nova renderização do componente.

Exemplo:

import React, { useRef } from 'react';

function MeuComponente() {
  const countRef = useRef(0);

  const incrementar = () => {
    countRef.current += 1;
    console.log('Valor atual:', countRef.current);
    // O componente não será re-renderizado
  };

  return <button onClick={incrementar}>Incrementar</button>;
}

Assim, useRef é adequado para armazenar qualquer dado que não afete a UI e que não exija uma re-renderização ao ser alterado.