Cum se stochează o valoare într-un component fără a apela re-renderizarea?

În React, pentru a stoca o valoare într-un component fără a provoca o re-randare, poți folosi hook-ul useRef. Valoarea stocată în useRef persistă între randări, dar modificarea acesteia nu declanșează o re-randare a componentului.

Exemplu:

import React, { useRef } from 'react';

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

  const crește = () => {
    countRef.current += 1;
    console.log('Valoarea curentă:', countRef.current);
    // Componnentul nu se va re-randa
  };

  return <button onClick={crește}>Crește</button>;
}

Prin urmare, useRef este potrivit pentru stocarea oricăror date care nu afectează UI-ul și nu necesită re-randare la modificare.