Optimasi React Context: Pola Selector dan Performa

React Context menyediakan mekanisme yang ampuh untuk mengelola status aplikasi dan membagikannya ke seluruh komponen tanpa perlu prop drilling. Namun, implementasi Context yang naif dapat menyebabkan hambatan performa, terutama dalam aplikasi besar dan kompleks. Setiap kali nilai Context berubah, semua komponen yang mengonsumsi Context tersebut akan di-render ulang, bahkan jika mereka hanya bergantung pada sebagian kecil data.

Artikel ini membahas secara mendalam pola selector sebagai strategi untuk mengoptimalkan performa React Context. Kita akan menjelajahi cara kerjanya, manfaatnya, dan memberikan contoh praktis untuk mengilustrasikan penggunaannya. Kita juga akan membahas pertimbangan performa terkait dan teknik optimasi alternatif.

Memahami Masalah: Re-render yang Tidak Perlu

Masalah utamanya muncul dari fakta bahwa React Context API, secara default, memicu re-render semua komponen yang mengonsumsi kapan pun nilai Context berubah. Pertimbangkan skenario di mana Context Anda menyimpan objek besar yang berisi data profil pengguna, pengaturan tema, dan konfigurasi aplikasi. Jika Anda memperbarui satu properti dalam profil pengguna, semua komponen yang mengonsumsi Context akan di-render ulang, bahkan jika mereka hanya mengandalkan pengaturan tema.

Hal ini dapat menyebabkan penurunan performa yang signifikan, terutama saat berhadapan dengan hierarki komponen yang kompleks dan pembaruan Context yang sering. Re-render yang tidak perlu membuang siklus CPU yang berharga dan dapat mengakibatkan antarmuka pengguna yang lamban.

Pola Selector: Pembaruan Bertarget

Pola selector memberikan solusi dengan memungkinkan komponen untuk berlangganan hanya pada bagian spesifik dari nilai Context yang mereka butuhkan. Alih-alih mengonsumsi seluruh Context, komponen menggunakan fungsi selector untuk mengekstrak data yang relevan. Ini mengurangi cakupan re-render, memastikan bahwa hanya komponen yang benar-benar bergantung pada data yang berubah yang diperbarui.

Cara kerjanya:

1. Context Provider: Context Provider menyimpan status aplikasi.
2. Fungsi Selector: Ini adalah fungsi murni yang mengambil nilai Context sebagai input dan mengembalikan nilai turunan. Mereka bertindak sebagai filter, mengekstrak bagian data tertentu dari Context.
3. Komponen Konsumen: Komponen menggunakan hook kustom (sering disebut `useContextSelector`) untuk berlangganan output dari fungsi selector. Hook ini bertanggung jawab untuk mendeteksi perubahan dalam data yang dipilih dan memicu re-render hanya jika diperlukan.

Mengimplementasikan Pola Selector

Berikut adalah contoh dasar yang mengilustrasikan implementasi pola selector:

1. Membuat Context

Pertama, kita mendefinisikan Context kita. Mari kita bayangkan sebuah context untuk mengelola profil pengguna dan pengaturan tema.

            import React, { createContext, useState, useContext } from 'react';

const AppContext = createContext({});

const AppProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    location: 'New York'
  });
  const [theme, setTheme] = useState({
    primaryColor: '#007bff',
    secondaryColor: '#6c757d'
  });

  const updateUserName = (name) => {
    setUser(prevUser => ({ ...prevUser, name }));
  };

  const updateThemeColor = (primaryColor) => {
    setTheme(prevTheme => ({ ...prevTheme, primaryColor }));
  };

  const value = {
    user,
    theme,
    updateUserName,
    updateThemeColor
  };

  return (
    
      {children}
    
  );
};

export { AppContext, AppProvider };
            

              
                Copy
              
            
          

2. Membuat Fungsi Selector

Selanjutnya, kita mendefinisikan fungsi selector untuk mengekstrak data yang diinginkan dari Context. Contohnya:

            const selectUserName = (context) => context.user.name;
const selectPrimaryColor = (context) => context.theme.primaryColor;

            

              
                Copy
              
            
          

3. Membuat Custom Hook (`useContextSelector`)

Ini adalah inti dari pola selector. Hook `useContextSelector` mengambil fungsi selector sebagai input dan mengembalikan nilai yang dipilih. Ini juga mengelola langganan ke Context dan memicu re-render hanya ketika nilai yang dipilih berubah.

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

const useContextSelector = (context, selector) => {
  const [selected, setSelected] = useState(() => selector(useContext(context)));
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  });

  useEffect(() => {
    const nextSelected = latestSelector.current(contextValue);
    if (!Object.is(selected, nextSelected)) {
      setSelected(nextSelected);
    }
  }, [contextValue]);

  return selected;
};

export default useContextSelector;
            

              
                Copy
              
            
          

Penjelasan:

• `useState`: Inisialisasi `selected` dengan nilai awal yang dikembalikan oleh selector.
• `useRef`: Menyimpan fungsi `selector` terbaru, memastikan bahwa selector yang paling mutakhir digunakan meskipun komponen di-render ulang.
• `useContext`: Memperoleh nilai context saat ini.
• `useEffect`: Efek ini berjalan setiap kali `contextValue` berubah. Di dalamnya, ia menghitung ulang nilai yang dipilih menggunakan `latestSelector`. Jika nilai yang dipilih yang baru berbeda dari nilai `selected` saat ini (menggunakan `Object.is` untuk perbandingan dangkal), status `selected` diperbarui, memicu re-render.

4. Menggunakan Context dalam Komponen

Sekarang, komponen dapat menggunakan hook `useContextSelector` untuk berlangganan bagian spesifik dari Context:

            import React from 'react';
import { AppContext, AppProvider } from './AppContext';
import useContextSelector from './useContextSelector';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

const ThemeColorDisplay = () => {
  const primaryColor = useContextSelector(AppContext, selectPrimaryColor);

  return 
Theme Color: {primaryColor}
;
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;
            

              
                Copy
              
            
          

Dalam contoh ini, `UserName` hanya di-render ulang ketika nama pengguna berubah, dan `ThemeColorDisplay` hanya di-render ulang ketika warna primer berubah. Memodifikasi email atau lokasi pengguna *tidak* akan menyebabkan `ThemeColorDisplay` di-render ulang, dan sebaliknya.

Manfaat Pola Selector

• Mengurangi Re-render: Manfaat utamanya adalah pengurangan signifikan pada re-render yang tidak perlu, yang mengarah pada peningkatan performa.
• Meningkatkan Performa: Dengan meminimalkan re-render, aplikasi menjadi lebih responsif dan efisien.
• Kejelasan Kode: Fungsi selector meningkatkan kejelasan dan pemeliharaan kode dengan secara eksplisit mendefinisikan dependensi data komponen.
• Dapat Diuji: Fungsi selector adalah fungsi murni, membuatnya mudah diuji dan dipahami.

Pertimbangan dan Optimasi

1. Memoization

Memoization dapat lebih meningkatkan performa fungsi selector. Jika nilai Context input belum berubah, fungsi selector dapat mengembalikan hasil yang di-cache, menghindari perhitungan yang tidak perlu. Ini sangat berguna untuk fungsi selector kompleks yang melakukan perhitungan mahal.

Anda dapat menggunakan hook `useMemo` dalam implementasi `useContextSelector` Anda untuk me-memoize nilai yang dipilih. Ini menambahkan lapisan optimasi lain, mencegah re-render yang tidak perlu bahkan ketika nilai context berubah, tetapi nilai yang dipilih tetap sama. Berikut adalah `useContextSelector` yang diperbarui dengan memoization:

            import { useContext, useState, useEffect, useRef, useMemo } from 'react';

const useContextSelector = (context, selector) => {
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  }, [selector]);

  const selected = useMemo(() => latestSelector.current(contextValue), [contextValue]);

  return selected;
};

export default useContextSelector;
            

              
                Copy
              
            
          

2. Imutabilitas Objek

Memastikan imutabilitas nilai Context sangat penting agar pola selector berfungsi dengan benar. Jika nilai Context diubah secara langsung, fungsi selector mungkin tidak mendeteksi perubahan, menyebabkan rendering yang salah. Selalu buat objek atau array baru saat memperbarui nilai Context.

3. Perbandingan Mendalam

Hook `useContextSelector` menggunakan `Object.is` untuk membandingkan nilai yang dipilih. Ini melakukan perbandingan dangkal. Untuk objek kompleks, Anda mungkin perlu menggunakan fungsi perbandingan mendalam untuk mendeteksi perubahan secara akurat. Namun, perbandingan mendalam bisa memakan biaya komputasi yang mahal, jadi gunakanlah dengan bijak.

4. Alternatif untuk `Object.is`

Ketika `Object.is` tidak mencukupi (misalnya, Anda memiliki objek bersarang dalam context Anda), pertimbangkan alternatif. Library seperti `lodash` menawarkan `_.isEqual` untuk perbandingan mendalam, tetapi perhatikan dampak performanya. Dalam beberapa kasus, teknik structural sharing menggunakan struktur data immutable (seperti Immer) dapat bermanfaat karena memungkinkan Anda memodifikasi objek bersarang tanpa mengubah yang asli, dan mereka seringkali dapat dibandingkan dengan `Object.is`.

5. `useCallback` untuk Selector

Fungsi `selector` itu sendiri bisa menjadi sumber re-render yang tidak perlu jika tidak di-memoize dengan benar. Lewatkan fungsi `selector` ke `useCallback` untuk memastikan bahwa fungsi tersebut hanya dibuat ulang ketika dependensinya berubah. Ini mencegah pembaruan yang tidak perlu pada custom hook.

            const UserName = () => {
  const userName = useContextSelector(AppContext, useCallback(selectUserName, []));

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

6. Menggunakan Library Seperti `use-context-selector`

Library seperti `use-context-selector` menyediakan hook `useContextSelector` bawaan yang dioptimalkan untuk performa dan menyertakan fitur seperti perbandingan dangkal. Menggunakan library tersebut dapat menyederhanakan kode Anda dan mengurangi risiko kesalahan.

            import { useContextSelector } from 'use-context-selector';
import { AppContext } from './AppContext';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

Contoh Global dan Praktik Terbaik

Pola selector dapat diterapkan di berbagai kasus penggunaan dalam aplikasi global:

• Lokalisasi: Bayangkan platform e-commerce yang mendukung berbagai bahasa. Context dapat menyimpan lokal saat ini dan terjemahan. Komponen yang menampilkan teks dapat menggunakan selector untuk mengekstrak terjemahan yang relevan untuk lokal saat ini.
• Manajemen Tema: Aplikasi media sosial dapat memungkinkan pengguna untuk menyesuaikan tema. Context dapat menyimpan pengaturan tema, dan komponen yang menampilkan elemen UI dapat menggunakan selector untuk mengekstrak properti tema yang relevan (misalnya, warna, font).
• Otentikasi: Aplikasi perusahaan global dapat menggunakan Context untuk mengelola status otentikasi pengguna dan izin. Komponen dapat menggunakan selector untuk menentukan apakah pengguna saat ini memiliki akses ke fitur-fitur tertentu.
• Status Pengambilan Data: Banyak aplikasi menampilkan status pemuatan. Sebuah context dapat mengelola status panggilan API, dan komponen dapat secara selektif berlangganan status pemuatan dari endpoint tertentu. Misalnya, komponen yang menampilkan profil pengguna mungkin hanya berlangganan status pemuatan dari endpoint `GET /user/:id`.

Teknik Optimasi Alternatif

Meskipun pola selector adalah teknik optimasi yang ampuh, itu bukan satu-satunya alat yang tersedia. Pertimbangkan alternatif-alternatif ini:

• `React.memo`: Bungkus komponen fungsional dengan `React.memo` untuk mencegah re-render ketika props tidak berubah. Ini berguna untuk mengoptimalkan komponen yang menerima props secara langsung.
• `PureComponent`: Gunakan `PureComponent` untuk komponen kelas untuk melakukan perbandingan dangkal props dan state sebelum re-render.
• Code Splitting: Bagi aplikasi menjadi bagian-bagian yang lebih kecil yang dapat dimuat sesuai permintaan. Ini mengurangi waktu muat awal dan meningkatkan performa keseluruhan.
• Virtualization: Untuk menampilkan daftar data yang besar, gunakan teknik virtualisasi untuk hanya merender item yang terlihat. Ini secara signifikan meningkatkan performa saat berhadapan dengan dataset besar.

Kesimpulan

Pola selector adalah teknik yang berharga untuk mengoptimalkan performa React Context dengan meminimalkan re-render yang tidak perlu. Dengan memungkinkan komponen untuk berlangganan hanya pada bagian spesifik dari nilai Context yang mereka butuhkan, ini meningkatkan responsivitas dan efisiensi aplikasi. Dengan menggabungkannya dengan teknik optimasi lain seperti memoization dan code splitting, Anda dapat membangun aplikasi React berperforma tinggi yang memberikan pengalaman pengguna yang mulus. Ingatlah untuk memilih strategi optimasi yang tepat berdasarkan kebutuhan spesifik aplikasi Anda dan pertimbangkan dengan cermat trade-off yang terlibat.

Artikel ini memberikan panduan komprehensif tentang pola selector, termasuk implementasi, manfaat, dan pertimbangannya. Dengan mengikuti praktik terbaik yang diuraikan dalam artikel ini, Anda dapat secara efektif mengoptimalkan penggunaan React Context Anda dan membangun aplikasi berperforma tinggi untuk audiens global.