Ketika kita menggunakan framework React JS, untuk mengakses DOM node atau React Element, kita biasanya menggunakan fungsi createRef, nah untuk React versi 16.8 atau diatasnya kita bisa menggunakan Hook useRef. React Hooks adalah fitur2 baru yang ditambahkan di React versi 16.8 yang dapat kita gunakan untuk menggunakan state, lifecycle, dll pada functional component.

Perbedaan antara createRef dengan Hook useRef adalah fungsi createRef akan selalu membuat Ref baru setiap kali component nya dirender, sedangkan useRef akan mengembalikan Ref yang sama dengan saat component tersebut pertama kali dirender.

• Saat kita ingin mengatur fokus pada Form, seleksi teks, mengontrol video atau audio, dll

• Mentrigger animasi pada suatu elemen HTML

• Mengintegrasikan dengan library DOM pihak ketiga

Sebagai contoh, kita mempunyai sebuah Form login, didalamnya terdapat 2 buah input teks, username dan password, saat pertama kali page diload kita akan fokuskan pada input username, saat kita menekan tombol enter, fokus tersebut akan beralih ke input password, dan terakhir ketika kita menekan tombol enter lagi kita akan memanggil fungsi login.

Untuk memulainya silakan buat dulu project Reactnya, disini saya menggunakan bantuan library create-react-app, untuk menginstallnya, jalankan command berikut pada terminal :

Copy
1npm install -g create-react-app

kalau di sistem operasi Linux tambahkan sudo di belakang sehingga menjadi sudo npm install -g create-react-app

Setelah itu jalankan create-react-app login-app untuk membuat project Reactnya, nama projectnya bebas, terserah temen2.

Setelah selesai membuat project nya kita buka folder login-app dan kita ubah file App.js menjadi seperti ini :

App.js
Copy
1import React, { useEffect, useRef } from 'react'
2
3const App = () => {
4    const usernameRef = useRef(null)
5    const passwordRef = useRef(null)
6
7    useEffect(() => {
8        usernameRef.current.focus()
9    })
10    const usernameNext = (e) => {
11        if (e.key === "Enter") {
12            passwordRef.current.focus()
13        }
14    }
15    const passwordNext = (e) => {
16        if (e.key === "Enter") {
17            login()
18        }
19    }
20    const login = () => alert('Welcome')
21
22    return (
23        <>
24            <h3>Login App</h3>
25            <input type="text" placeholder="username" ref={ usernameRef } onKeyDown={ usernameNext }/>
26            <br/>
27            <input type="password" placeholder="password" ref={ passwordRef } onKeyDown={ passwordNext }/>
28            <br/>
29            <button onClick={ login }>LOGIN</button>
30        </>
31    )
32}
33
34export default App

Penjelasan kode :

1. Pada baris ke 1 kita mengimport fungsi useEffect dan useRef agar bisa kita gunakan nantinya

2. Pada baris ke 4–5 kita membuat 2 Ref baru menggunakan fungsi useRef

3. Pada baris ke 11–13 berfungsi untuk memberi fokus pada input username saat page diload pertama kali

4. pada baris ke 25 kita memberi fokus ke password ketika tombol enter pada keyboard ditekan

Untuk menghubungkan Ref nya kita masukkan variabel Ref yang telah kita buat tadi ke dalam attribute Ref pada elemen HTML, perlu diketahui attribute ini bukan attribute asli HTML melainkan khusus pada react saja.

Setelah itu kita buka terminal dan masuk ke directory project kita lalu ketik npm start kemudian buka http://localhost:3000

Tampilan http://localhost:3000

Forwarding Refs adalah sebuah teknik untuk mengirimkan Ref kepada child component, sebagai contoh kita akan memisahkan elemen input menjadi sebuah component baru, dan kita akan mengirimkan Ref ke component Input.

Ubah App.js menjadi seperti ini :

App.js
Copy
1import React, { useEffect, useRef } from 'react'
2import Input from './Input'
3
4const App = () => {
5    const usernameRef = useRef(null)
6    const passwordRef = useRef(null)
7
8    useEffect(() => {
9        usernameRef.current.focus()
10    })
11    const usernameNext = (e) => {
12        if (e.key === "Enter") {
13            passwordRef.current.focus()
14        }
15    }
16    const passwordNext = (e) => {
17        if (e.key === "Enter") {
18            login()
19        }
20    }
21    const login = () => alert('Welcome')
22
23    return (
24        <>
25            <h3>Login App</h3>
26            <Input type="text" placeholder="username" ref={ usernameRef } onKeyDown={ usernameNext }/>
27            <br/>
28            <Input type="password" placeholder="password" ref={ passwordRef } onKeyDown={ passwordNext }/>
29            <br/>
30            <button onClick={ login }>LOGIN</button>
31        </>
32    )
33}
34
35export default App

Kemudian kita buat sebuah file bernama Input.js yang berisi component Input

Input.js
Copy
1import React, { forwardRef } from 'react'
2
3const Input = ({ type, placeholder, onKeyDown }, ref) => {
4    return <input type={ type } placeholder={ placeholder } ref={ ref } onKeyDown={ onKeyDown }/>
5}
6
7export default forwardRef(Input)

Pada component Input kita menerima 2 parameter yaitu props dan Ref kemudian kita mengembalikan sebuah elemen input, saat mengexportnya sedikit berbeda, kita membungkus component Input dengan HOC forwardRef yang telah disediakan oleh React untuk melakukan Forwarding Refs.

Oke mungkin itu saja yang bisa saya bagikan kali ini, kalau kamu merasa artikel ini bermanfaat silakan Like & Share artikel ini ke teman-teman kamu atau jika kamu punya pertanyaan, tulis aja di kolom komentar, Thank you! 😁 🙏