Pola Ref React: Teknik Manipulasi DOM untuk UI Dinamis

React, sebuah pustaka JavaScript yang kuat untuk membangun antarmuka pengguna, seringkali mendorong pendekatan deklaratif dalam pengembangan UI. Namun, terkadang, manipulasi langsung terhadap Document Object Model (DOM) menjadi perlu. Di sinilah ref React berperan. Ref menyediakan cara untuk mengakses node DOM atau elemen React yang dibuat dalam metode render. Panduan komprehensif ini mengeksplorasi berbagai pola dan teknik ref React untuk memanipulasi DOM secara efektif, mengelola fokus, berintegrasi dengan pustaka pihak ketiga, dan mengoptimalkan performa UI. Kita akan mendalami contoh-contoh praktis dan praktik terbaik yang cocok untuk audiens global pengembang React.

Memahami Ref React

Pada intinya, ref adalah objek JavaScript biasa dengan properti current. Properti ini dapat diubah (mutable), memungkinkan Anda menyimpan nilai apa pun, termasuk node DOM atau instance komponen React. React menyediakan dua cara utama untuk membuat ref: React.createRef() (komponen kelas) dan hook useRef() (komponen fungsional).

React.createRef() (Komponen Kelas)

React.createRef() membuat objek ref yang ditugaskan ke properti instance komponen kelas. Ref ini akan tetap ada selama siklus hidup komponen.

            
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Akses node DOM setelah komponen terpasang
    console.log(this.myRef.current); // node DOM atau null
  }

  render() {
    return 
Hello, world!
;
  }
}

            

              
                Copy
              
            
          

useRef() (Komponen Fungsional)

Hook useRef() membuat objek ref yang dapat diubah yang properti .current-nya diinisialisasi dengan argumen yang dilewatkan (initialValue). Objek ref yang dikembalikan akan tetap ada selama masa hidup penuh komponen.

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

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Akses node DOM setelah komponen terpasang
    console.log(myRef.current); // node DOM atau null
  }, []); // Array dependensi kosong memastikan ini hanya berjalan sekali saat pemasangan

  return 
Hello, world!
;
}

            

              
                Copy
              
            
          

Kasus Penggunaan Umum untuk Ref React

Ref sangat serbaguna dan dapat diterapkan dalam berbagai skenario dalam pengembangan React.

1. Mengakses dan Memanipulasi Node DOM

Kasus penggunaan paling umum untuk ref adalah mengakses dan memanipulasi node DOM secara langsung. Ini berguna untuk tugas-tugas seperti memfokuskan bidang input, menggulir ke suatu elemen, atau mengukur dimensinya.

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

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

  useEffect(() => {
    // Fokuskan bidang input setelah komponen terpasang
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Contoh: Bayangkan membangun formulir multi-langkah. Ketika pengguna menyelesaikan suatu bidang, Anda mungkin ingin secara otomatis memfokuskan pada input berikutnya. Ref membuat ini menjadi mulus.

2. Mengelola Fokus, Seleksi Teks, dan Pemutaran Media

Ref sangat penting untuk kontrol yang lebih detail atas fokus, seleksi teks dalam elemen, dan mengelola pemutaran media (misalnya, video atau audio).

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

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

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

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

  return (
    

      
      Putar
      Jeda
    
  );
}

            

              
                Copy
              
            
          

Pertimbangan Aksesibilitas: Saat menggunakan ref untuk mengelola fokus, pastikan manajemen fokus yang tepat untuk menjaga aksesibilitas bagi pengguna yang mengandalkan navigasi keyboard atau teknologi bantu. Misalnya, setelah modal terbuka, segera atur fokus ke elemen pertama yang dapat difokuskan di dalam modal.

3. Berintegrasi dengan Pustaka Pihak Ketiga

Banyak pustaka JavaScript pihak ketiga secara langsung memanipulasi DOM. Ref menyediakan jembatan antara model deklaratif React dan pustaka-pustaka imperatif ini.

            
import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto'; // Contoh: Menggunakan Chart.js

function ChartComponent() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Merah', 'Biru', 'Kuning', 'Hijau', 'Ungu', 'Oranye'],
          datasets: [{
            label: '# Jumlah Suara',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Catatan Internasionalisasi: Saat mengintegrasikan pustaka pihak ketiga yang menangani tanggal, angka, atau mata uang, pastikan mereka dikonfigurasi dengan benar untuk mendukung lokal pengguna. Banyak pustaka menawarkan opsi untuk menentukan lokal yang diinginkan. Misalnya, pustaka pemformatan tanggal harus diinisialisasi dengan bahasa dan wilayah pengguna untuk menampilkan tanggal dalam format yang benar (misalnya, MM/DD/YYYY vs. DD/MM/YYYY).

4. Memicu Animasi Imperatif

Meskipun pustaka React seperti Framer Motion dan React Transition Group lebih disukai untuk sebagian besar kebutuhan animasi, ref dapat digunakan untuk animasi imperatif ketika kontrol yang lebih detail diperlukan.

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

function FadeIn() {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      element.style.opacity = 0; // Awalnya tersembunyi
      let opacity = 0;
      const intervalId = setInterval(() => {
        opacity += 0.05;
        element.style.opacity = opacity;
        if (opacity >= 1) {
          clearInterval(intervalId);
        }
      }, 20); // Sesuaikan interval untuk kecepatan

      return () => clearInterval(intervalId); // Bersihkan saat unmount
    }
  }, []);

  return 
Muncul Perlahan!
;
}

            

              
                Copy
              
            
          

5. Mengukur Dimensi Elemen

Ref memungkinkan Anda mengukur dimensi (lebar, tinggi) elemen di dalam DOM secara akurat. Ini berguna untuk tata letak responsif, penentuan posisi dinamis, dan membuat efek visual khusus.

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

function MeasureElement() {
  const elementRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      setDimensions({ width, height });
    }
  }, []);

  return (
    

      
Ukur Elemen Ini
      
Lebar: {dimensions.width}px
      
Tinggi: {dimensions.height}px
    
  );
}

            

              
                Copy
              
            
          

Pola Ref Tingkat Lanjut

Di luar penggunaan dasar createRef dan useRef, beberapa pola tingkat lanjut memanfaatkan ref untuk skenario yang lebih kompleks.

1. Ref Panggilan Balik (Callback Refs)

Ref panggilan balik (callback refs) menyediakan cara yang lebih fleksibel untuk mengakses node DOM. Alih-alih menetapkan objek ref, Anda menetapkan fungsi ke atribut ref. React akan memanggil fungsi ini dengan node DOM saat komponen dipasang dan dengan null saat dilepas.

            
import React, { useState } from 'react';

function CallbackRefExample() {
  const [element, setElement] = useState(null);

  const setRef = (node) => {
    setElement(node);
  };

  return (
    

      
Ref elemen ini dikelola oleh sebuah callback.
      {element && 
Elemen: {element.tagName}
}
    
  );
}

            

              
                Copy
              
            
          

Ref panggilan balik sangat berguna ketika Anda perlu melakukan tindakan tambahan saat ref diatur atau dibersihkan.

2. Meneruskan Ref (forwardRef)

React.forwardRef adalah teknik yang memungkinkan sebuah komponen untuk menerima ref yang diteruskan dari komponen induknya. Ini berguna ketika Anda ingin mengekspos node DOM dari komponen anak ke induknya.

            
import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

function ParentComponent() {
  const inputRef = React.useRef(null);

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

  return (
    

      
      Fokuskan Input
    
  );
}

            

              
                Copy
              
            
          

Dalam contoh ini, MyInput meneruskan ref ke elemen input di dalamnya, memungkinkan ParentComponent untuk mengakses dan memanipulasi input secara langsung.

3. Mengekspos Metode Komponen dengan Ref

Ref juga dapat digunakan untuk mengekspos metode dari komponen anak ke induknya. Ini berguna untuk membuat komponen yang dapat digunakan kembali dengan API imperatif.

            
import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return ;
});

function ParentComponent() {
  const fancyInputRef = useRef(null);

  const handleFocus = () => {
    fancyInputRef.current.focus();
  };

  const handleGetValue = () => {
    alert(fancyInputRef.current.getValue());
  };

  return (
    

      
      Fokuskan Input
      Dapatkan Nilai
    
  );
}

            

              
                Copy
              
            
          

Hook useImperativeHandle memungkinkan Anda untuk menyesuaikan nilai instance yang diekspos ke komponen induk saat menggunakan forwardRef. Ini memungkinkan akses terkontrol ke metode anak.

Praktik Terbaik Menggunakan Ref React

Meskipun ref menyediakan kemampuan yang kuat, sangat penting untuk menggunakannya dengan bijaksana dan mengikuti praktik terbaik.

• Hindari Manipulasi DOM yang Berlebihan: Pendekatan deklaratif React umumnya lebih efisien. Hanya gunakan ref bila diperlukan untuk tugas-tugas yang tidak dapat dicapai dengan mudah melalui manajemen state React.
• Gunakan Ref Seperlunya: Penggunaan ref yang berlebihan dapat menyebabkan kode yang lebih sulit untuk dipelihara dan dipahami.
• Perhatikan Siklus Hidup Komponen: Pastikan Anda mengakses properti .current dari sebuah ref hanya setelah komponen terpasang (e.g., di componentDidMount atau useEffect). Mengaksesnya sebelumnya dapat menghasilkan nilai null.
• Bersihkan Ref: Saat menggunakan ref panggilan balik, pastikan Anda mengatur ref menjadi null saat komponen dilepas untuk mencegah kebocoran memori.
• Pertimbangkan Alternatif: Sebelum menggunakan ref, jelajahi apakah manajemen state React atau komponen terkontrol dapat mencapai perilaku yang diinginkan.
• Aksesibilitas: Saat memanipulasi fokus, pastikan aplikasi tetap dapat diakses oleh pengguna dengan disabilitas.

Pertimbangan Global untuk Penggunaan Ref

Saat membangun aplikasi untuk audiens global, pertimbangkan aspek-aspek berikut saat menggunakan ref:

• Tata Letak Kanan-ke-Kiri (RTL): Saat memanipulasi elemen DOM yang terkait dengan tata letak (misalnya, menggulir), pastikan kode Anda menangani tata letak RTL dengan benar untuk bahasa seperti Arab dan Ibrani. Gunakan properti seperti scrollLeft dan scrollWidth dengan hati-hati dan berpotensi menormalkannya berdasarkan arah tata letak.
• Input Method Editors (IME): Sadarilah bahwa pengguna di beberapa wilayah mungkin menggunakan IME untuk memasukkan teks. Saat mengelola fokus atau seleksi teks, pastikan kode Anda berinteraksi dengan benar dengan IME dan tidak mengganggu input pengguna.
• Pemuatan Font: Jika Anda mengukur dimensi elemen sebelum font dimuat sepenuhnya, pengukuran awal mungkin tidak benar. Gunakan teknik untuk memastikan font dimuat sebelum mengandalkan pengukuran ini (misalnya, menggunakan document.fonts.ready). Sistem penulisan yang berbeda (misalnya, Latin, Sirilik, CJK) memiliki ukuran dan metrik font yang sangat berbeda.
• Preferensi Pengguna: Pertimbangkan preferensi pengguna untuk animasi dan transisi. Beberapa pengguna mungkin lebih suka gerakan yang dikurangi. Hormati preferensi ini saat menggunakan ref untuk memicu animasi. Gunakan kueri media CSS `prefers-reduced-motion` untuk mendeteksi preferensi pengguna.

Kesimpulan

Ref React adalah alat yang kuat untuk memanipulasi DOM secara langsung, mengelola fokus, berintegrasi dengan pustaka pihak ketiga, dan mengoptimalkan performa UI. Dengan memahami berbagai pola ref dan mengikuti praktik terbaik, Anda dapat memanfaatkan ref secara efektif sambil mempertahankan manfaat dari pendekatan deklaratif React. Ingatlah untuk mempertimbangkan aspek aksesibilitas global dan internasionalisasi untuk menciptakan aplikasi yang inklusif dan ramah pengguna bagi audiens yang beragam. Dengan perencanaan dan implementasi yang cermat, ref React dapat secara signifikan meningkatkan kemampuan dan daya tanggap aplikasi React Anda.