Panduan Awal Menggunakan useRef di ReactJS

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

Apa itu useRef?

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

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

Tanda Tangan hook useRef

Marilah kita 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.

Pertimbangkan itu seperti sebuah kotak khusus dengan label yang mengatakan "current". Apapun yang Anda masukkan ke dalam kotak ini menjadi nilai current.

Menggunakan hook ref

Sekarang, mari kita 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} />;
}

Marilah kitaura ini:

1. Kita import useRef bersamaan dengan useEffect dari React.
2. Kita membuat ref yang disebut 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 mendapatkan fokus. Itu seperti magis, kan? Tetapi itu bukan magis – itu adalah kekuatan useRef!

Kasus Penggunaan useRef

Sekarang kita telah melihat contoh dasar, mari kita jelajahi beberapa kasus penggunaan lain untuk useRef. Percayalah, hook ini lebih universal daripada pisau Swiss Army!

1. Menyimpan Nilai Sebelumnya

kadang-kadang, Anda mungkin ingin menjaga nilai dari render sebelumnya. useRef adalah solusi sempurna 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>Nilai saat ini: {count}</p>
<p>Nilai 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 kita 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() langsung ke elemen video saat tombol ditekan.

3. Menyimpan Nilai antara Rendernya

useRef juga berguna saat Anda perlu menyimpan nilai antara render tanpa menyebabkan re-render. Mari kita 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>Nilai: {count}</div>;
}

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

Penutup

Dan begitulah, teman-teman! Kita telah melakukan perjalanan melalui negeri useRef, mengexploreasi tanda tangan, bagaimana menerapkannya, dan beberapa kasus penggunaan umum. Ingat, useRef adalah seperti teman setia di perjalanan React Anda – selalu ada saat Anda butuh untuk menjaga sesuatu tanpa memicu re-render.

Berikut adalah ringkasan metode yang kita telah bahas:

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

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

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

Selamat coding, dan may the refs be with you!

Credits: Image by storyset