React useSyncExternalStore: Menguasai Sinkronisasi Penyimpanan Eksternal

Dalam aplikasi React modern, mengelola state secara efektif sangatlah penting. Meskipun React menyediakan solusi manajemen state bawaan seperti useState dan useReducer, mengintegrasikan dengan sumber data eksternal atau pustaka manajemen state pihak ketiga memerlukan pendekatan yang lebih canggih. Di sinilah useSyncExternalStore berperan.

Apa itu useSyncExternalStore?

useSyncExternalStore adalah hook React yang diperkenalkan di React 18 yang memungkinkan Anda untuk berlangganan dan membaca dari sumber data eksternal dengan cara yang kompatibel dengan rendering konkuren. Ini sangat penting ketika berhadapan dengan data yang tidak dikelola langsung oleh React, seperti:

• Pustaka manajemen state pihak ketiga: Redux, Zustand, Jotai, dll.
• API Browser: localStorage, IndexedDB, dll.
• Sumber data eksternal: Server-sent events, WebSockets, dll.

Sebelum useSyncExternalStore, menyinkronkan penyimpanan eksternal dapat menyebabkan tearing dan inkonsistensi, terutama dengan fitur rendering konkuren React. Hook ini mengatasi masalah tersebut dengan menyediakan cara yang terstandarisasi dan berkinerja untuk menghubungkan data eksternal ke komponen React Anda.

Mengapa menggunakan useSyncExternalStore? Manfaat dan Keuntungan

Menggunakan useSyncExternalStore menawarkan beberapa keuntungan utama:

• Aman untuk Konkurensi: Memastikan komponen Anda selalu menampilkan tampilan yang konsisten dari penyimpanan eksternal, bahkan selama render konkuren. Ini mencegah masalah tearing di mana bagian dari UI Anda mungkin menunjukkan data yang tidak konsisten.
• Kinerja: Dioptimalkan untuk kinerja, meminimalkan render ulang yang tidak perlu. Hook ini memanfaatkan mekanisme internal React untuk berlangganan perubahan secara efisien dan memperbarui komponen hanya jika diperlukan.
• API Terstandarisasi: Menyediakan API yang konsisten dan dapat diprediksi untuk berinteraksi dengan penyimpanan eksternal, terlepas dari implementasi yang mendasarinya.
• Mengurangi Boilerplate: Menyederhanakan proses koneksi ke penyimpanan eksternal, mengurangi jumlah kode kustom yang perlu Anda tulis.
• Kompatibilitas: Bekerja dengan mulus dengan berbagai sumber data eksternal dan pustaka manajemen state.

Bagaimana useSyncExternalStore Bekerja: Pembahasan Mendalam

Hook useSyncExternalStore menerima tiga argumen:

1. subscribe(callback: () => void): () => void: Sebuah fungsi yang mendaftarkan callback untuk diberi tahu ketika penyimpanan eksternal berubah. Fungsi ini harus mengembalikan fungsi untuk berhenti berlangganan. Inilah cara React mengetahui kapan penyimpanan memiliki data baru.
2. getSnapshot(): T: Sebuah fungsi yang mengembalikan snapshot data dari penyimpanan eksternal. Snapshot ini harus berupa nilai sederhana dan tidak dapat diubah (immutable) yang dapat digunakan React untuk menentukan apakah data telah berubah.
3. getServerSnapshot?(): T (Opsional): Sebuah fungsi yang mengembalikan snapshot awal data di server. Ini digunakan untuk server-side rendering (SSR) untuk memastikan konsistensi antara server dan klien. Jika tidak disediakan, React akan menggunakan getSnapshot() selama rendering di server, yang mungkin tidak ideal untuk semua skenario.

Berikut adalah rincian cara kerja argumen-argumen ini bersama-sama:

1. Saat komponen di-mount, useSyncExternalStore memanggil fungsi subscribe untuk mendaftarkan callback.
2. Ketika penyimpanan eksternal berubah, ia akan memanggil callback yang terdaftar melalui subscribe.
3. Callback tersebut memberitahu React bahwa komponen perlu di-render ulang.
4. Selama proses render, useSyncExternalStore memanggil getSnapshot untuk mendapatkan data terbaru dari penyimpanan eksternal.
5. React membandingkan snapshot saat ini dengan snapshot sebelumnya. Jika berbeda, komponen diperbarui dengan data baru.
6. Saat komponen di-unmount, fungsi berhenti berlangganan yang dikembalikan oleh subscribe akan dipanggil untuk mencegah kebocoran memori.

Contoh Implementasi Dasar: Integrasi dengan localStorage

Mari kita ilustrasikan cara menggunakan useSyncExternalStore dengan contoh sederhana: membaca dan menulis nilai ke localStorage.

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Menangani potensi eror seperti `localStorage` tidak tersedia.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Atau nilai default jika sesuai untuk pengaturan SSR Anda

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Memicu event penyimpanan di jendela saat ini untuk memicu pembaruan di tab lain.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Hello, {name || 'World'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

Penjelasan:

• getLocalStorageItem: Fungsi pembantu untuk mengambil nilai dari localStorage secara aman, menangani potensi eror.
• useLocalStorage: Hook kustom yang merangkum logika untuk berinteraksi dengan localStorage menggunakan useSyncExternalStore.
• subscribe: Mendengarkan event 'storage', yang dipicu ketika localStorage diubah di tab atau jendela lain. Yang terpenting, kami memicu event penyimpanan setelah menetapkan nilai baru untuk memicu pembaruan dengan benar di jendela yang *sama*.
• getSnapshot: Mengembalikan nilai saat ini dari localStorage.
• serverSnapshot: Mengembalikan null (atau nilai default) untuk server-side rendering.
• setValue: Memperbarui nilai di localStorage dan memicu event penyimpanan untuk memberi sinyal ke tab lain.
• MyComponent: Komponen sederhana yang menggunakan hook useLocalStorage untuk menampilkan dan memperbarui nama.

Pertimbangan Penting untuk localStorage:

• Penanganan Eror: Selalu bungkus akses localStorage dalam blok try...catch untuk menangani potensi eror, seperti ketika localStorage dinonaktifkan atau tidak tersedia (mis., dalam mode penjelajahan pribadi).
• Event Penyimpanan: Event 'storage' hanya dipicu ketika localStorage diubah di tab atau jendela *lain*, bukan di jendela yang sama. Oleh karena itu, kami memicu StorageEvent baru secara manual setelah menetapkan nilai.
• Serialisasi Data: localStorage hanya menyimpan string. Anda mungkin perlu melakukan serialisasi dan deserialisasi struktur data yang kompleks menggunakan JSON.stringify dan JSON.parse.
• Keamanan: Berhati-hatilah dengan data yang Anda simpan di localStorage, karena dapat diakses oleh kode JavaScript pada domain yang sama. Informasi sensitif tidak boleh disimpan di localStorage.

Kasus Penggunaan dan Contoh Lanjutan

1. Integrasi dengan Zustand (atau pustaka manajemen state lainnya)

Mengintegrasikan useSyncExternalStore dengan pustaka manajemen state global seperti Zustand adalah kasus penggunaan yang umum. Berikut contohnya:

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Snapshot server, sediakan state default
  ).bears
  return <h1>{bears} bears around here!</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>one bear</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

Penjelasan:

• Kami menggunakan Zustand untuk manajemen state global
• useStore.subscribe: Fungsi ini berlangganan ke penyimpanan Zustand dan akan memicu render ulang saat state penyimpanan berubah.
• useStore.getState: Fungsi ini mengembalikan state saat ini dari penyimpanan Zustand.
• Parameter ketiga menyediakan state default untuk server-side rendering (SSR), memastikan bahwa komponen di-render dengan benar di server sebelum JavaScript sisi klien mengambil alih.
• Komponen mendapatkan jumlah beruang menggunakan useSyncExternalStore dan menampilkannya.
• Komponen Controls menunjukkan cara menggunakan setter Zustand.

2. Integrasi dengan Server-Sent Events (SSE)

useSyncExternalStore dapat digunakan untuk memperbarui komponen secara efisien berdasarkan data real-time dari server menggunakan Server-Sent Events (SSE).

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState(null);
  const [eventSource, setEventSource] = useState(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Ganti dengan endpoint SSE Anda

  if (!realTimeData) {
    return <p>Loading...</p>;
  }

  return <div><p>Real-time Data: {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

Penjelasan:

• useSSE: Hook kustom yang membuat koneksi SSE ke URL yang diberikan.
• subscribe: Menambahkan event listener ke objek EventSource untuk diberi tahu tentang pesan baru dari server. Ini menggunakan useCallback untuk memastikan bahwa fungsi callback tidak dibuat ulang pada setiap render.
• getSnapshot: Mengembalikan data yang paling baru diterima dari aliran SSE.
• serverSnapshot: Mengembalikan null untuk server-side rendering.
• RealTimeDataComponent: Komponen yang menggunakan hook useSSE untuk menampilkan data real-time.

3. Integrasi dengan IndexedDB

Sinkronkan komponen React dengan data yang tersimpan di IndexedDB menggunakan useSyncExternalStore.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Ganti dengan nama dan versi database Anda

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Ganti dengan nama penyimpanan Anda
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Lakukan debounce pada callback untuk mencegah render ulang yang berlebihan.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Sesuaikan penundaan debounce sesuai kebutuhan
    };

    const handleVisibilityChange = () => {
      // Ambil ulang data saat tab menjadi terlihat lagi
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Ambil data terbaru dari IndexedDB setiap kali getSnapshot dipanggil
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Loading data from IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Data from IndexedDB:</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

Penjelasan:

• getAllData: Fungsi asinkron yang mengambil semua data dari penyimpanan IndexedDB.
• useIndexedDBData: Hook kustom yang menggunakan useSyncExternalStore untuk berlangganan perubahan di IndexedDB.
• subscribe: Menyiapkan listener untuk perubahan visibilitas dan fokus untuk memperbarui data dari IndexedDB dan menggunakan fungsi debounce untuk menghindari pembaruan yang berlebihan.
• getSnapshot: Mengambil snapshot saat ini dengan memanggil `getAllData()` lalu mengembalikan `data` dari state.
• serverSnapshot: Mengembalikan null untuk server-side rendering.
• IndexedDBComponent: Komponen yang menampilkan data dari IndexedDB.

Pertimbangan Penting untuk IndexedDB:

• Operasi Asinkron: Interaksi dengan IndexedDB bersifat asinkron, jadi Anda perlu menangani sifat asinkron dari pengambilan dan pembaruan data dengan hati-hati.
• Penanganan Eror: Implementasikan penanganan eror yang kuat untuk menangani potensi masalah dengan akses database secara baik, seperti database tidak ditemukan atau eror izin.
• Versi Database: Kelola versi database dengan hati-hati menggunakan event onupgradeneeded untuk memastikan kompatibilitas data seiring berkembangnya aplikasi Anda.
• Kinerja: Operasi IndexedDB bisa relatif lambat, terutama untuk dataset besar. Optimalkan kueri dan pengindeksan untuk meningkatkan kinerja.

Pertimbangan Kinerja

Meskipun useSyncExternalStore dioptimalkan untuk kinerja, masih ada beberapa pertimbangan yang perlu diingat:

• Minimalkan Perubahan Snapshot: Pastikan bahwa fungsi getSnapshot hanya mengembalikan snapshot baru ketika data benar-benar telah berubah. Hindari membuat objek atau array baru yang tidak perlu. Pertimbangkan menggunakan teknik memoization untuk mengoptimalkan pembuatan snapshot.
• Pembaruan Batch: Jika memungkinkan, lakukan pembaruan batch ke penyimpanan eksternal untuk mengurangi jumlah render ulang. Misalnya, jika Anda memperbarui beberapa properti di penyimpanan, coba perbarui semuanya dalam satu transaksi.
• Debouncing/Throttling: Jika penyimpanan eksternal sering berubah, pertimbangkan untuk melakukan debouncing atau throttling pada pembaruan ke komponen React. Ini dapat mencegah render ulang yang berlebihan dan meningkatkan kinerja. Hal ini sangat berguna dengan penyimpanan yang volatil seperti saat mengubah ukuran jendela browser.
• Perbandingan Dangkal (Shallow Comparison): Pastikan Anda mengembalikan nilai primitif atau objek yang tidak dapat diubah (immutable) di getSnapshot sehingga React dapat dengan cepat menentukan apakah data telah berubah menggunakan perbandingan dangkal.
• Pembaruan Bersyarat: Dalam kasus di mana penyimpanan eksternal sering berubah tetapi komponen Anda hanya perlu bereaksi terhadap perubahan tertentu, pertimbangkan untuk mengimplementasikan pembaruan bersyarat di dalam fungsi `subscribe` untuk menghindari render ulang yang tidak perlu.

Kesalahan Umum dan Pemecahan Masalah

• Masalah Tearing: Jika Anda masih mengalami masalah tearing setelah menggunakan useSyncExternalStore, periksa kembali apakah fungsi getSnapshot Anda mengembalikan tampilan data yang konsisten dan apakah fungsi subscribe memberitahu React tentang perubahan dengan benar. Pastikan Anda tidak mengubah data secara langsung di dalam fungsi getSnapshot.
• Loop Tak Terbatas (Infinite Loops): Loop tak terbatas dapat terjadi jika fungsi getSnapshot selalu mengembalikan nilai baru, bahkan ketika data tidak berubah. Ini bisa terjadi jika Anda membuat objek atau array baru yang tidak perlu. Pastikan Anda mengembalikan nilai yang sama jika data tidak berubah.
• Server-Side Rendering yang Hilang: Jika Anda menggunakan server-side rendering, pastikan untuk menyediakan fungsi getServerSnapshot untuk memastikan komponen di-render dengan benar di server. Fungsi ini harus mengembalikan state awal dari penyimpanan eksternal.
• Berhenti Berlangganan yang Salah: Selalu pastikan Anda berhenti berlangganan dari penyimpanan eksternal dengan benar di dalam fungsi yang dikembalikan oleh subscribe. Kegagalan melakukannya dapat menyebabkan kebocoran memori.
• Penggunaan yang Salah dengan Mode Konkuren: Pastikan penyimpanan eksternal Anda kompatibel dengan Mode Konkuren. Hindari melakukan mutasi pada penyimpanan eksternal saat React sedang me-render. Mutasi harus sinkron dan dapat diprediksi.

Kesimpulan

useSyncExternalStore adalah alat yang ampuh untuk menyinkronkan komponen React dengan penyimpanan data eksternal. Dengan memahami cara kerjanya dan mengikuti praktik terbaik, Anda dapat memastikan bahwa komponen Anda menampilkan data yang konsisten dan terbaru, bahkan dalam skenario rendering konkuren yang kompleks. Hook ini menyederhanakan integrasi dengan berbagai sumber data, mulai dari pustaka manajemen state pihak ketiga hingga API browser dan aliran data real-time, yang mengarah pada aplikasi React yang lebih kuat dan berkinerja. Ingatlah untuk selalu menangani potensi eror, mengoptimalkan kinerja, dan mengelola langganan dengan hati-hati untuk menghindari kesalahan umum.