Πώς αποθηκεύετε μια τιμή σε ένα συστατικό χωρίς να καλέσετε επαναπροβολή;

Στο React, για την αποθήκευση μιας τιμής σε ένα συστατικό χωρίς να προκαλεί επανα-απόδοση, μπορείτε να χρησιμοποιήσετε το hook useRef. Η τιμή που αποθηκεύεται στο useRef διατηρείται μεταξύ των επανα-αποδόσεων, αλλά η αλλαγή αυτής της τιμής δεν προκαλεί επανα-απόδοση του συστατικού.

Παράδειγμα:

import React, { useRef } from 'react';

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

  const αυξήστε = () => {
    countRef.current += 1;
    console.log('Τρέχουσα τιμή:', countRef.current);
    // Το συστατικό δεν θα επανα-αποδοθεί
  };

  return <button onClick={αυξήστε}>Αύξηση</button>;
}

Έτσι, το useRef είναι κατάλληλο για την αποθήκευση οποιωνδήποτε δεδομένων που δεν επηρεάζουν το UI και δεν απαιτούν επανα-απόδοση κατά την αλλαγή.