Memahami dan Menggunakan useRef di React

a year ago

# ReactJS

# Javascript

Apa itu useRef?

useRef adalah hook yang memungkinkan kita untuk membuat referensi ke elemen DOM atau menyimpan nilai yang tidak memerlukan render ulang ketika diperbarui. Ini sangat berguna untuk mengelola fokus, teks input, dan nilai yang ingin kita simpan tanpa memicu render ulang.

Langkah-langkah Menggunakan useRef

1. Mengimpor useRef

Langkah pertama adalah mengimpor useRef dari React.

import React, { useRef } from 'react';

2. Membuat Referensi

Kemudian, kita bisa membuat referensi menggunakan useRef.

const inputRef = useRef(null);

3. Mengaitkan Referensi ke Elemen DOM

Setelah itu, kita bisa mengaitkan referensi tersebut ke elemen DOM menggunakan atribut ref.

Contoh Penggunaan useRef

Berikut adalah contoh lengkap penggunaan useRef untuk mengelola fokus pada elemen input ketika tombol ditekan.

import React, { useRef } from 'react';

const FocusInput = () => {

const inputRef = useRef(null);

const handleFocus = () => {

inputRef.current.focus();

};

return (

<div>

<button onClick={handleFocus} className="bg-blue-500 text-white p-2 rounded">Focus Input</button>

</div>

);

};

Kesimpulan

Dengan menggunakan useRef, kita dapat dengan mudah mengakses elemen DOM dan menyimpan nilai tanpa memicu render ulang. Ini sangat berguna dalam banyak kasus, seperti mengelola fokus dan menyimpan nilai yang tidak perlu diperbarui di UI. Cobalah untuk menerapkan useRef dalam proyek Anda untuk memahami manfaatnya secara langsung.