Panduan Pemula Menggunakan useRef di ReactJS

Hai sana, para pengembang React masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia hook React, khususnya hook useRef. Jangan khawatir jika Anda baru belajar pemrograman – saya akan menjadi panduan teman baik Anda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita masuk ke dalam!

Apa itu useRef?

Sebelum kita mulai mengoding, mari pahami apa itu useRef. Bayangkan Anda punya sebuah kotak ajaib yang dapat menahan nilai apa pun yang Anda inginkan, dan kotak ini tidak berubah meskipun komponen Anda dirender ulang. Itu sebenarnya apa yang useRef lakukan untuk kita di React!

useRef adalah hook yang menyediakan cara untuk membuat referensi yang dapat berubah yang bertahan melintasi re-renders komponen. Itu seperti memiliki sebuah kompartemen rahasia di komponen Anda tempat Anda dapat menyimpan informasi tanpa memicu re-render saat informasi itu berubah.

Tanda Tangan hook useRef

Mari lihat bagaimana kita menggunakan hook useRef:

const refContainer = useRef(initialValue);

Di sini, initialValue adalah nilai awal yang Anda inginkan, dan refContainer adalah objek dengan properti tunggal yang disebut current. Properti current ini menyimpan nilai aktual yang Anda referensikan.

Bayangkan itu seperti sebuah kotak khusus dengan label yang mengatakan "current". Apa pun yang Anda masukkan ke dalam kotak ini menjadi nilai current.

Menggunakan hook ref

Sekarang, mari lihat bagaimana kita dapat menggunakan useRef dalam sebuah konteks dunia nyata. Bayangkan kita ingin membuat input teks sederhana yang, saat diklik, secara otomatis fokus dan memungkinkan pengguna mulai mengetik.

import React, { useRef, useEffect } from 'react';

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

mariuraikan ini:

1. Kita mengimpor useRef serta useEffect dari React.
2. Kita membuat ref bernama inputRef menggunakan useRef(null).
3. Kita menggunakan hook useEffect untuk fokus ke input saat komponen dimuat.
4. Dalam JSX, kita melekatkan ref ke elemen input menggunakan atribut ref.

Saat komponen ini dirender, input akan secara otomatis menerima fokus. Itu seperti magi, bukan? Tetapi itu bukan magi – itu kekuatan useRef!

Kasus Penggunaan useRef

Sekarang kita sudah melihat contoh dasar, mari jelajahi beberapa kasus penggunaan lain untuk useRef. Percayalah, hook ini lebih multifungsi daripada pisau瑞士 Army!

1. Menyimpan Nilai Sebelumnya

kadang-kadang, Anda mungkin ingin mencatat nilai dari render sebelumnya. useRef sangat cocok untuk hal ini!

import React, { useState, useRef, useEffect } from 'react';

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

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

return (
<div>
<p>Jumlah saat ini: {count}</p>
<p>Jumlah sebelumnya: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>Perbesar</button>
</div>
);
}

Dalam contoh ini, kita menggunakan useRef untuk menyimpan nilai sebelumnya dari count. Setiap kali count berubah, kita memperbarui ref kita di hook useEffect. Dengan cara ini, kita selalu memiliki akses ke nilai saat ini dan nilai sebelumnya.

2. Mengakses Elemen DOM

useRef juga sangat cocok untuk mengakses elemen DOM secara langsung. Mari buat komponen pemutar video sebagai contoh:

import React, { useRef } from 'react';

function VideoPlayer() {
const videoRef = useRef(null);

const playVideo = () => {
videoRef.current.play();
};

const pauseVideo = () => {
videoRef.current.pause();
};

return (
<div>
<video ref={videoRef} src="path/to/your/video.mp4" />
<button onClick={playVideo}>Mainkan</button>
<button onClick={pauseVideo}>Jeda</button>
</div>
);
}

Di sini, kita menggunakan useRef untuk mendapatkan referensi ke elemen video. Ini memungkinkan kita untuk memanggil metode seperti play() dan pause() secara langsung pada elemen video saat tombol ditekan.

3. Menyimpan Nilai Antar Render

useRef juga berguna saat Anda perlu menyimpan nilai antar render tanpa menyebabkan re-render. Mari lihat contoh:

import React, { useState, useRef, useEffect } from 'react';

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>Jumlah: {count}</div>;
}

Dalam contoh ini, kita menggunakan useRef untuk menyimpan ID interval yang dikembalikan oleh setInterval. Ini memungkinkan kita untuk menghapus interval di fungsi pembersihan hook useEffect, mencegah kebocoran memori.

Penutup

Dan di sana Anda punya nya, teman-teman! Kita telah melintasi negeri useRef, menjelajahi tanda tangan nya, bagaimana menerapkannya, dan beberapa kasus penggunaan umum. Ingat, useRef adalah seperti teman setia di perjalanan React Anda – selalu ada saat Anda butuh untuk mencatat sesuatu tanpa memicu re-render.

Berikut adalah ringkasan metode yang kita pelajari:

Metode	Deskripsi
useRef(initialValue)	Membuat objek ref dengan nilai awal yang disediakan
ref.current	Mengakses atau memodifikasi nilai saat ini dari ref
<element ref={refObject}>	Menempelkan ref ke elemen DOM

Saat Anda terus melanjutkan perjalanan React Anda, Anda akan menemukan banyak cara kreatif lain untuk menggunakan useRef. Itu adalah alat yang kuat yang, saat digunakan dengan benar, dapat memecahkan banyak masalah sulit di pengembangan React.

Ingat, kunci untuk menguasai React (atau konsep pemrograman apa pun) adalah latihan. Jadi, teruskan mencoba contoh ini, eksperimen dengan ide Anda sendiri, dan jangan takut untuk membuat kesalahan. Itu adalah bagaimana kita semua belajar dan tumbuh sebagai pengembang.

Selamat coding, dan may the refs be with you!

Credits: Image by storyset