React JS: useRef Hook

Dalam pengembangan aplikasi React, kita seringkali dihadapkan pada pilihan untuk menggunakan useRef atau useState dalam mengelola state. Meskipun keduanya merupakan hooks yang berguna, namun memiliki tujuan dan karakteristik yang berbeda. Berikut ini kita akan membahas perbedaan antara useRef dan useState, serta kapan harus menggunakan masing-masing hook tersebut.

useState: Mengelola State yang Menyebabkan Re-render

useState adalah hook yang digunakan untuk mengelola state dalam functional component react. Setiap kali state diperbarui menggunakan fungsi setState, komponen akan di-render ulang sehingga UI akan selalu up-to-date dengan state terbaru. Dalam postingan sebelumnya kita telah membahas tentang hook useState serta bagaimana menggunakannya sebagai berikut :

React JS: useState Hook

Memahami Cara Mengelola d...

Memahami Cara Mengelola dan Memperbarui State di Komponen React

useRef: Mengelola Nilai yang Tidak Menyebabkan Re-render

Di sisi lain, useRef digunakan untuk menyimpan nilai yang tidak menyebabkan re-render saat nilainya berubah. Salah satu kegunaan utama useRef adalah untuk mengakses elemen DOM secara langsung. Kita dapat mengacu pada elemen DOM dengan menggunakan atribut ref pada elemen tersebut:

<input type="text" ref={inputRef} />

Kapan Menggunakan useRef atau useState?

Secara umum, useState digunakan ketika kita perlu mengelola state yang akan mempengaruhi tampilan UI dan memerlukan re-render komponen saat state berubah. Contohnya seperti input form, list item, atau jumlah like atau follower dalam sosial media.

Sebaliknya, useRef lebih cocok digunakan ketika kita perlu menyimpan internal value atau referensi ke suatu DOM yang tidak memerlukan re-render komponen saat nilainya berubah. Ini bertujuan untuk menghindari re-render yang tidak diperlukan sehingga dapat membantu meningkatkan performa aplikasi.

Untuk menggunakan useRef, kita perlu mengimpornya terlebih dahulu dari React:

import { useRef } from 'react';

Kemudian, kita dapat dapat membuat sebuah referensi baru dengan memanggil hook useRef dan menginisialisasi nilai awalnya (jika diperlukan):

const inputRef = useRef(null);

Dalam contoh di atas, inputRef adalah sebuah referensi yang diinisialisasi dengan nilai null. Untuk mengakses elemen DOM, kita dapat mengaitkan referensi tersebut dengan elemen menggunakan atribut ref:

    <input type="text" ref={inputRef} />
    <button onClick={handleClick}>Ubah Nilai</button>

Setelah itu, kita dapat mengakses elemen DOM tersebut melalui inputRef.current. Jika kita ingin mengubah nilai yang disimpan dalam referensi tersebut, kita dapat mengubahnya dengan cara berikut :

const handleClick = () => {
  input.current.value = 'Nilai baru'; // Mengubah nilai pada elemen DOM
  console.log(input.current.value); // Mengakses nilai dari elemen DOM
};