React Academy · Pelajaran

Memisahkan Context untuk Membatasi Render Ulang

Pisahkan nilai yang sering berubah dari nilai yang stabil ke dalam context yang berbeda.

Memisahkan Context untuk Membatasi Render Ulang adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Selamat datang

Dalam pelajaran ini, Anda akan belajar memisahkan Konteks React menjadi beberapa penyedia agar perenderan ulang dapat diminimalkan ketika hanya sebagian nilai konteks yang berubah.

Masalah Perenderan Ulang pada Konteks

Setiap komponen yang memanggil useContext(MyCtx) akan merender ulang ketika bagian ANY dari nilai konteks berubah — bahkan jika bagian yang digunakannya tidak berubah. Satu konteks besar dapat menyebabkan banyak perenderan ulang yang tidak diperlukan.

Memisahkan Berdasarkan Frekuensi Pembaruan

Pisahkan nilai yang sering berubah dari nilai yang jarang berubah. Tempatkan setiap kelompok dalam konteksnya sendiri. Konsumen hanya berlangganan ke konteks yang mereka perlukan.

const ThemeCtx = createContext('light');
const UserCtx = createContext(null);
// theme changes rarely; user changes on login/logout — same frequency is fine
// but notifCount changes every second — split it out!

Memisahkan Konteks Data dan Pengiriman

Pola yang umum adalah memisahkan satu konteks untuk data state (merender ulang pada setiap perubahan) dan konteks lain untuk fungsi pengiriman/pengatur (stabil, tidak pernah menyebabkan konsumen merender ulang). Konsumen yang hanya menggunakan pengiriman tidak pernah merender ulang akibat perubahan data.

const CountCtx = createContext(0);
const SetCountCtx = createContext(() => {});

function Provider({ children }) {
  const [count, setCount] = useState(0);
  return (
    <CountCtx.Provider value={count}>
      <SetCountCtx.Provider value={setCount}>
        {children}
      </SetCountCtx.Provider>
    </CountCtx.Provider>
  );
}

Memoisasi Konteks Pengiriman

Fungsi pengatur dari useState bersifat stabil (referensinya sama pada setiap perenderan), sehingga nilai konteks pengiriman tidak berubah. Namun, jika Anda menghitung objek actions, bungkus objek tersebut dalam useMemo.

const actions = useMemo(() => ({
  increment: () => setCount(c => c + 1),
  reset: () => setCount(0),
}), []); // stable — empty deps

Penyedia Bersarang

Bersaranglah beberapa penyedia dalam hierarki komponen. Konsumen hanya mengimpor dan menggunakan konteks tertentu yang mereka perlukan, sehingga langganan tetap terbatas.

function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <NotificationsProvider>
          <Router />
        </NotificationsProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Membuat Profil Sebelum Memisahkan

Selalu buat profil dengan React DevTools sebelum memisahkan konteks. Perenderan ulang yang tidak diperlukan hanya menjadi masalah jika prosesnya mahal. Jangan merekayasa konteks secara berlebihan jika konteks tersebut cepat dirender ulang.

Kompromi Pemisahan Konteks

Lebih banyak konteks berarti lebih banyak penyedia dalam hierarki komponen. Hal ini menambah beban pemahaman. Lakukan pemisahan hanya ketika pembuatan profil menunjukkan masalah kinerja, bukan sebagai langkah pencegahan.

Menggabungkan dengan React.memo

Bahkan dengan satu konteks, membungkus komponen anak yang mahal dalam React.memo berarti komponen tersebut hanya merender ulang ketika propertinya berubah — bukan ketika konteks berubah. Ini dapat menjadi alternatif yang lebih sederhana daripada pemisahan.

const ExpensiveChild = React.memo(function({ label }) {
  return <div>{label}</div>;
}); // won't re-render on context change if label hasn't changed

useReducer + Konteks

Pasangkan useReducer dengan konteks untuk mengelola state yang kompleks. Simpan state dalam satu konteks dan fungsi pengiriman dalam konteks lain. Pengiriman bersifat stabil; state diperbarui pada setiap tindakan.

Pemeriksaan Singkat

Mengapa memisahkan state dan pengiriman ke dalam konteks yang berbeda dapat meningkatkan kinerja?

Rangkuman

Pisahkan konteks berdasarkan frekuensi pembaruan: state yang sering berubah dalam satu konteks, serta pengiriman/fungsi pengatur yang stabil dalam konteks lain. Buat profil terlebih dahulu, lakukan pemisahan hanya jika diperlukan, dan pertimbangkan React.memo sebagai alternatif yang lebih sederhana.

Berikutnya

Pelajaran berikutnya: **Memoisasi Nilai Konteks dengan useMemo** — Anda akan membungkus objek nilai konteks dalam useMemo agar konsumen tidak merender ulang ketika data tidak berubah.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Memisahkan Context untuk Membatasi Render Ulang” gratis?

Ya — teks lengkap “Memisahkan Context untuk Membatasi Render Ulang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Memisahkan Context untuk Membatasi Render Ulang”?

Pisahkan nilai yang sering berubah dari nilai yang stabil ke dalam context yang berbeda. Kamu berlatih React Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Academy?

Tidak diperlukan pengalaman sebelumnya. React Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Memisahkan Context untuk Membatasi Render Ulang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Memisahkan Context untuk Membatasi Render Ulang
Menghafalkan Nilai Context dengan useMemo
Pola Pemilih Context
Kapan Tidak Menggunakan Context

← Kembali ke React Academy