React adalah pustaka JavaScript populer untuk membangun antarmuka pengguna. Ini menyediakan beberapa pengait yang memungkinkan pengembang mengelola status dan melakukan efek samping. Dua hook yang umum digunakan di React adalah useRefdan useState. Meskipun sekilas tampak serupa, keduanya melayani tujuan yang berbeda dan memiliki kasus penggunaan yang berbeda. Pada artikel ini, kami akan mengeksplorasi useRefdan useStatesecara mendalam, membandingkan fungsionalitasnya dan memberikan contoh untuk menggambarkan penggunaannya.

Pemahaman useRef:

Pengait useRefdi React membuat referensi yang dapat diubah yang tetap ada di seluruh render komponen. Tidak seperti useState, yang mengelola status dan memicu rendering ulang, useRefterutama digunakan untuk mengakses dan memanipulasi DOM atau untuk menyimpan nilai yang dapat diubah yang tidak memicu rendering ulang. Ini mengembalikan objek yang bisa berubah dengan currentproperti.

Contoh 1: Mengakses elemen DOM

Katakanlah kita ingin fokus pada kolom input saat tombol diklik. Kita dapat mencapai ini menggunakan useRefsebagai berikut:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

Pemahaman useState:

Hook useStatedigunakan untuk mengelola status dalam komponen fungsional. Ini memungkinkan kita membuat variabel yang dapat diperbarui dan memicu render ulang saat nilainya berubah. Hook useStatemengembalikan array dengan dua elemen: nilai status saat ini dan fungsi untuk memperbaruinya.

Contoh 2: Mengelola counter

Mari buat komponen penghitung sederhana menggunakan useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Membandingkan useRefdan useState:

Meskipun keduanya useRefdan useStatedapat menyimpan nilai, keduanya melayani tujuan yang berbeda:

1. Mengelola status: useStatedirancang untuk mengelola status dalam suatu komponen. Ini memicu render ulang saat status diperbarui, memastikan UI mencerminkan nilai terbaru.
2. Mengakses dan memanipulasi DOM: useRefterutama digunakan untuk berinteraksi dengan DOM, seperti mengakses nilai masukan atau berfokus pada elemen. Ini memungkinkan kita untuk menyimpan referensi ke node DOM dan mengambil propertinya tanpa memicu render ulang.
3. Mempertahankan nilai di seluruh perenderan: useRefmempertahankan nilai yang sama di seluruh perenderan komponen, sambil useStatemenginisialisasi status selama setiap perenderan.
4. Perilaku rendering ulang: Memperbarui nilai yang dikembalikan oleh useStatemenyebabkan komponen merender ulang, sementara memperbarui currentproperti yang refdibuat dengan useReftidak memicu render ulang.

Untuk lebih memahami kasus penggunaan useRefand useState, mari jelajahi beberapa skenario di mana setiap hook lebih cocok:

1. useRefGunakan Kasus:

1.1. Mengakses elemen DOM: Saat Anda perlu mengakses atau memanipulasi elemen DOM, seperti memfokuskan input, menggulir ke elemen tertentu, atau mengukur ukuran elemen, useRefadalah pilihan yang tepat. Ini memungkinkan Anda membuat referensi ke simpul DOM dan mengakses properti atau metodenya.

1.2. Menyimpan nilai yang dapat diubah: Jika Anda memiliki nilai yang perlu dipertahankan di seluruh perenderan tetapi tidak memengaruhi UI komponen atau memicu perenderan ulang, useRefadalah pilihan yang baik. Misalnya, Anda dapat menggunakan useRefuntuk menyimpan nilai sebelumnya, menyimpan nilai dalam cache, atau mempertahankan nilai yang dapat diubah untuk perbandingan.

2. useState Gunakan Kasus:

2.1. Mengelola status komponen: Saat Anda perlu mengelola dan memperbarui status dalam suatu komponen, useStateadalah pendekatan yang disarankan. Ini menyediakan cara untuk menyimpan dan memperbarui nilai yang memengaruhi UI komponen dan memicu render ulang.

2.2. Menangani interaksi pengguna: Jika Anda memiliki elemen interaktif di komponen Anda, seperti kotak centang, bidang input, atau sakelar, useStatebiasanya digunakan untuk mengelola status yang terkait dengan interaksi ini. Anda dapat memperbarui status berdasarkan input pengguna dan merefleksikan perubahan di UI.

Contoh Perbandingan:

Untuk mengilustrasikan perbedaan antara useRefdan useStatelebih jelas, mari pertimbangkan contoh di mana kedua kait dapat digunakan:

Misalkan kita memiliki formulir dengan kolom input dan tombol kirim. Saat pengguna mengklik tombol kirim, kami ingin menampilkan pesan sukses tanpa mengosongkan kolom input.

Menggunakan useRef:

import React, { useRef } from 'react';

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

  const handleSubmit = () => {
    const value = inputRef.current.value;
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message without clearing the input field
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Menggunakan useState:

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = () => {
    // Submit the form
    displaySuccessMessage();
  };

  const displaySuccessMessage = () => {
    // Display success message
    setInputValue(''); // Clear the input field
  };

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input value={inputValue} onChange={handleInputChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Dalam contoh ini, useStatedigunakan untuk mengelola nilai kolom input dan memicu render ulang saat pengguna berinteraksi dengannya. Pembaruan status di displaySuccessMessagemembersihkan kolom input dengan memperbarui inputValuestatus.

Kesimpulan:

Kesimpulannya, useRefdan useStatekeduanya merupakan hook penting dalam React, tetapi mereka memiliki tujuan yang berbeda. useRefterutama digunakan untuk mengakses dan memanipulasi DOM atau menyimpan nilai yang dapat diubah tanpa memicu render ulang. Ini memberikan referensi yang bisa berubah yang tetap ada di seluruh render komponen. Di sisi lain, useStatedigunakan untuk mengelola status komponen, memicu render ulang saat status diperbarui. Ini mengembalikan nilai status dan fungsi untuk memperbaruinya.

Memahami perbedaan antara useRefdan useStatedan mengetahui kapan harus menggunakan setiap hook sangat penting untuk menulis komponen React yang efektif dan optimal. Dengan memanfaatkan useRefdan useStatebenar, Anda dapat membangun aplikasi yang interaktif dan berkinerja tinggi dengan React.

Terima kasih sudah membaca!

Saya harap artikel ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar. Umpan balik Anda membantu saya menjadi lebih baik.

Jangan lupa berlangganan⭐️

Halaman Facebook :https://www.facebook.com/designTechWorld1

Halaman Instagram :https://www.instagram.com/techd.esign/

Saluran Youtube :https://www.youtube.com/@tech..Design/

Twitter :https://twitter.com/sumit_singh2311

Alat tangkap yang digunakan :

laptop :https://amzn.to/3yKkzaC

Jam tangan:https://amzn.to/41cialm

Anda dapat memilih React Book: https://amzn.to/3Tw29nx

Beberapa buku tambahan yang berkaitan dengan bahasa pemrograman:

https://amzn.to/3z3tW5s

https://amzn.to/40n4m6O

https://amzn.to/3Jzstse

https://amzn.to/3nbl8aE

* Penafian Penting — “Amazon dan logo Amazon adalah merek dagang dari Amazon.com, Inc. atau afiliasinya.”