Belajar React Dasar #11: useRef

• Apa Itu useRef?
• useRef untuk Mengakses DOM
• useRef untuk Menyimpan Nilai Tanpa Re-render
• Perbedaan useRef vs useState
• useRef untuk Menyimpan Data Sebelumnya
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang useEffect, yaitu hook untuk menangani efek samping seperti memanggil API, event listener, atau timer.

Pada artikel kali ini, kita akan membahas tentang useRef. Hook ini sering digunakan untuk menyimpan nilai yang tidak menyebabkan re-render, serta untuk mengakses elemen DOM secara langsung.

Apa Itu useRef?

useRef adalah hook bawaan React yang digunakan untuk:

1. Menyimpan nilai yang bisa diubah tanpa memicu re-render.
2. Mengakses elemen DOM secara langsung.

Sintaks dasar:

const refContainer = useRef(initialValue);

• refContainer.current → menyimpan nilai yang bisa diakses atau diubah.
• Perubahan nilai refContainer.current tidak memicu re-render.

useRef untuk Mengakses DOM

Kita bisa menggunakan useRef untuk mengambil referensi langsung ke elemen DOM.

import { useRef } from "react";

function App() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} placeholder="Ketik sesuatu..." />
      <button onClick={focusInput}>Fokus ke Input</button>
    </div>
  );
}

export default App;

Penjelasan:

• inputRef dibuat dengan useRef().
• Atribut ref={inputRef} menghubungkan input dengan ref.
• inputRef.current mengacu pada elemen <input>.
• Saat tombol diklik, fungsi focusInput menjalankan .focus() pada input.

useRef untuk Menyimpan Nilai Tanpa Re-render

useRef juga bisa digunakan untuk menyimpan nilai yang tidak ikut memicu re-render.

import { useState, useRef } from "react";

function App() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);

  renderCount.current += 1;

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
      <p>Component dirender sebanyak: {renderCount.current} kali</p>
    </div>
  );
}

export default App;

Penjelasan:

• State count akan memicu re-render setiap kali berubah.
• renderCount menggunakan useRef untuk menyimpan jumlah render.
• Nilai renderCount.current bertambah setiap kali render, tetapi tidak memicu render tambahan.

Perbedaan useRef vs useState

useRef untuk Menyimpan Data Sebelumnya

Kita bisa menggunakan useRef untuk menyimpan nilai state sebelumnya.

import { useState, useEffect, useRef } from "react";

function App() {
  const [count, setCount] = useState(0);
  const prevCount = useRef();

  useEffect(() => {
    prevCount.current = count;
  }, [count]);

  return (
    <div>
      <h1>Count sekarang: {count}</h1>
      <h2>Count sebelumnya: {prevCount.current}</h2>
      <button onClick={() => setCount(count + 1)}>Tambah</button>
    </div>
  );
}

export default App;

Penjelasan:

• Kita simpan nilai count lama ke prevCount.current setiap kali count berubah.
• Dengan begitu, kita bisa tahu berapa nilai sebelumnya.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang useRef, hook yang sangat berguna untuk:

• Mengakses elemen DOM secara langsung.
• Menyimpan nilai yang tidak memicu re-render.
• Menyimpan data sebelumnya.

Di artikel berikutnya, kita akan membahas tentang Memoization di React (React.memo, useMemo, useCallback) untuk optimasi performa aplikasi.

Terima kasih