Jak przechowywać wartość w komponencie bez wywoływania ponownego renderowania?

W React, aby przechowywać wartość w komponencie bez wywoływania ponownego renderowania, można użyć hooka useRef. Wartość przechowywana w useRef jest zachowywana między renderami, ale zmiana tej wartości nie powoduje ponownego renderowania komponentu.

Przykład:

import React, { useRef } from 'react';

function MójKomponent() {
  const countRef = useRef(0);

  const zwiększ = () => {
    countRef.current += 1;
    console.log('Aktualna wartość:', countRef.current);
    // Komponent nie zostanie ponownie wyrenderowany
  };

  return <button onClick={zwiększ}>Zwiększ</button>;
}

Dlatego useRef jest odpowiedni do przechowywania dowolnych danych, które nie wpływają na UI i nie wymagają ponownego renderowania po zmianie.