Menggunakan

useRef

di

React

Saat membuat komponen menggunakan React, kalian mungkin pernah menemui kasus dimana dibutuhkan untuk mengakses DOM element dari website tersebut dengan JavaScript.

Berikut adalah kode yang biasa kalian gunakan saat mencoba mengakses DOM element dengan plain JavaScript tanpa mengunakan React.

const sidebarElement = document.querySelector("#sidebar");
const footerElement = document.querySelector("#footer");

Atau mungkin kalian ingin menyimpan sebuah value internal untuk sebuah komponen tapi tidak ingin melakukan render ulang ketika value tersebut di-assign, salah satu contohnya saat kita ingin menggunakan interval pada suatu komponen. Menggunakan useState hook untuk kasus ini kurang tepat karena ketika value di-assign maka akan men-trigger komponen untuk melakukan render ulang.

const [isPhoneVisible, setIsPhoneVisible] = useState(false);

// Ini akan men-trigger render ulang untuk komponen tersebut.
setIsPhoneVisible(true)

Tidak bisa pula menggunakan variabel biasa seperti let untuk menyimpan value tanpa perlu render ulang. Hanya menggunakan let memang tidak men-trigger komponen untuk render ulang. Namun jika render ulang terjadi pada komponen parent misalnya, maka yang terjadi value nya akan di-reset seperti value awal.

let isPhoneVisible = false;

// Mengubah value pada variabel tidak men-trigger render ulang.
isPhoneVisible = true;

// Tiba-tiba terjadi render ulang pada komponen parent.
// isPhoneVisible di-reset ke value awal yaitu false.
// Padahal kita tidak menginginkan value kita di-reset ke awal.

Untuk mengatasi kasus-kasus diatas kita dapat menggunakan useRef hook. Pada dasarnya, useRef hook digunakan untuk menyimpan value yang tidak membutuhkan rendering saat value tersebut di-assign.

const refIsPhoneVisible = useRef(false);

// Mengubah value pada useRef tidak men-trigger render ulang.
refIsPhoneVisible.current = true;

// Tiba-tiba terjadi render ulang pada komponen parent.
// refIsPhoneVisible tetap memiliki value nya yaitu true.

Bisa pula digunakan untuk mengakses DOM element sebagai berikut.

const refSidebarElement = useRef(null);
const refFooterElement = useRef(null);

useEffect(() => {
  refSidebarElement.current?.innerText = "This is Sidebar";
  refFooterElement.current?.innerText = "This is Footer";
}, []);

return (
  <div>
    <div ref={refSidebarElement}>
      <p>Sidebar</p>
    </div>
    <footer ref={refFooterElement}>
      <p>Footer</p>  
    </footer>
  </div>
)

Atau misalkan ingin menggunakan interval pada sebuah komponen.

const refTimer = useRef(null)

useEffect(() => {
  refTimer.current = setInterval(() => {
    console.log("Hello World");
  }, 1000);

  return () => {
    if (refTimer.current) {
      clearInterval(refTimer.current)
    }
  };
}, []);