React Academy · Pelajaran

Komponen Murni dan Menghindari Efek Samping saat Render

Tulis fungsi render yang bebas dari mutasi dan pembacaan eksternal.

Komponen Murni dan Menghindari Efek Samping saat Render adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 mempelajari arti komponen murni dalam React, alasan fungsi render harus bebas dari efek samping, serta cara menemukan dan memperbaiki pelanggaran kemurnian yang umum.

Apa Itu Fungsi Murni?

Fungsi murni selalu mengembalikan keluaran yang sama untuk masukan yang sama dan tidak menimbulkan efek samping yang dapat diamati. React mengharapkan fungsi komponen Anda bersifat murni: dengan properti dan status yang sama, fungsi tersebut harus selalu mengembalikan JSX yang sama.

Mengapa Kemurnian Penting dalam React

React dapat memanggil komponen Anda berkali-kali (StrictMode, fitur konkuren, dan render sisi server). Jika render Anda memiliki efek samping seperti pemanggilan API, mutasi DOM, atau penulisan variabel global, efek tersebut dapat berjalan berkali-kali secara tidak terduga.

Ketidakmurnian Umum: Mengubah Status Eksternal

Jangan pernah mengubah variabel yang didefinisikan di luar komponen selama render. Mutasi boleh dilakukan di dalam penangan kejadian atau useEffect, tetapi tidak saat render.

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Ketidakmurnian Umum: Mengubah Properti

Jangan pernah mengubah objek properti di dalam komponen. Properti bersifat hanya-baca. Jika Anda memerlukan versi yang telah diubah, buat variabel baru.

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Ketidakmurnian Umum: Menggunakan Acak / Tanggal dalam Render

Memanggil `Math.random()` atau `Date.now()` secara langsung dalam render menghasilkan nilai yang berbeda pada setiap pemanggilan dan merusak kemurnian. Pindahkan pemanggilan ini ke penginisialisasi status atau useEffect.

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

Pemanggilan API Berada di Dalam useEffect

Mengambil data secara langsung di dalam isi fungsi komponen (bukan di dalam useEffect) merupakan ketidakmurnian — tindakan ini terpicu pada setiap render. Selalu pindahkan pemanggilan pengambilan data ke dalam useEffect dengan dependensi yang sesuai.

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Mutasi Lokal Diperbolehkan

Membuat dan mengubah objek/array yang dibuat *di dalam* pemanggilan render yang sama sepenuhnya diperbolehkan — tidak ada pihak lain yang dapat mengamatinya. Ini disebut mutasi lokal.

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Menggunakan StrictMode untuk Menemukan Ketidakmurnian

React StrictMode memanggil komponen Anda dua kali dalam pengembangan. Jika UI Anda tidak konsisten di antara kedua pemanggilan atau Anda melihat efek samping ganda, render Anda tidak murni. Perbaiki ketidakmurnian tersebut hingga pemanggilan ganda tidak menimbulkan masalah.

Komponen Murni dan React.memo

Saat komponen bersifat murni (properti yang sama → keluaran yang sama), membungkusnya dengan `React.memo` memberi tahu React bahwa render ulang dapat dilewati jika properti belum berubah, sehingga kinerja meningkat.

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Pemeriksaan Singkat

Manakah dari tindakan berikut yang merupakan efek samping yang boleh dilakukan secara langsung di dalam fungsi render komponen React?

Rangkuman

Komponen murni selalu mengembalikan JSX yang sama untuk masukan yang sama. Hindari mengubah properti atau variabel eksternal dalam render, gunakan useEffect untuk efek samping, dan andalkan StrictMode untuk menemukan pelanggaran.

Berikutnya

Pelajaran berikutnya: **Praktik Terbaik Kunci & Referensi** — Anda akan menggunakan kunci stabil dengan benar, menghindari masalah penggunaan indeks sebagai kunci, dan bekerja dengan ref panggilan balik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Murni dan Menghindari Efek Samping saat Render” gratis?

Ya — teks lengkap “Komponen Murni dan Menghindari Efek Samping saat Render” 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 “Komponen Murni dan Menghindari Efek Samping saat Render”?

Tulis fungsi render yang bebas dari mutasi dan pembacaan eksternal. 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 2 dari 4.

Berapa lama pelajaran “Komponen Murni dan Menghindari Efek Samping saat Render” 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

Fungsi StrictMode
Komponen Murni dan Menghindari Efek Samping saat Render
Praktik Terbaik Key dan Ref
Struktur Folder dan Konvensi Penamaan

← Kembali ke React Academy