0Pricing
React Academy · Pelajaran

Fungsi StrictMode

Pahami pemanggilan ganda dan peringatan API yang sudah usang dalam pengembangan.

Fungsi StrictMode 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 mempelajari fungsi React.StrictMode dalam pengembangan, peringatan yang ditampilkannya, dan cara fitur ini membantu Anda menulis kode React yang lebih aman.

Apa Itu StrictMode?

StrictMode adalah komponen React khusus yang membungkus sebagian pohon Anda dan mengaktifkan pemeriksaan tambahan **hanya dalam pengembangan**. StrictMode tidak memberikan pengaruh apa pun pada build produksi.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Pemanggilan Ganda Siklus Hidup

Dalam StrictMode, React sengaja memanggil fungsi komponen dan beberapa metode siklus hidup Anda **dua kali** dalam pengembangan. Hal ini dirancang untuk menampilkan efek samping yang tidak dibersihkan dengan benar.

Mengapa Dipanggil Dua Kali?

React 18+ dapat memasang ulang komponen di masa mendatang (misalnya untuk penyegaran cepat dan API Offscreen). Pemanggilan dua kali dalam pengembangan menyimulasikan hal ini, sehingga Anda dapat menemukan bug seperti langganan yang menumpuk atau mutasi DOM yang berjalan dua kali.

Pemasangan–Pelepasan–Pemasangan Ulang Efek

Dengan StrictMode di React 18, setiap useEffect dijalankan, dibersihkan, lalu dijalankan lagi saat pemasangan awal. Jika fungsi pembersihan Anda benar, pemanggilan ganda ini tidak berbahaya. Jika aplikasi Anda rusak, pembersihannya hilang atau salah.
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

Mendeteksi API yang Tidak Digunakan Lagi

StrictMode memberikan peringatan saat kode Anda menggunakan API React yang tidak digunakan lagi, seperti `componentWillMount`, `componentWillReceiveProps`, dan ref string. Peringatan ini muncul di konsol peramban sebagai peringatan berwarna kuning.

Peringatan API Konteks Lama

Jika pustaka pihak ketiga menggunakan API konteks lama (`childContextTypes` / `getChildContext`), StrictMode akan memberikan peringatan. Ini menandakan bahwa pustaka tersebut perlu diperbarui ke API `React.createContext` modern.

Aman Diaktifkan di Aplikasi yang Sudah Ada

Anda dapat membungkus hanya sebagian pohon komponen dengan StrictMode untuk mengaktifkannya secara bertahap di aplikasi yang sudah ada. Mulailah dari bagian baru, lalu perluas penerapannya sambil memperbaiki peringatan.
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

Tidak Ada Perbedaan Visual

StrictMode tidak merender UI yang terlihat. StrictMode sepenuhnya merupakan alat pengembangan. Anda tidak akan melihat elemen tambahan apa pun di DOM — hanya peringatan konsol tambahan dan perilaku pemanggilan ganda.

Aktifkan Sejak Hari Pertama

Praktik terbaiknya adalah mengaktifkan StrictMode sejak awal proyek. Memperbaiki masalah pemanggilan ganda sejak dini jauh lebih murah daripada menemukannya nanti saat basis kode sudah besar.

Pemeriksaan Singkat

Apa tujuan pemanggilan ganda fungsi komponen oleh React StrictMode?

Rangkuman

StrictMode adalah alat pengembangan tanpa biaya yang memanggil render dan efek dua kali untuk menemukan kode yang tidak murni, memberikan peringatan tentang API yang tidak digunakan lagi, dan menyiapkan aplikasi Anda untuk fitur React di masa mendatang.

Berikutnya

Pelajaran berikutnya: **Komponen Murni & Menghindari Efek Samping dalam Render** — Anda akan belajar menulis fungsi render yang bebas dari mutasi dan pembacaan eksternal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi StrictMode” gratis?

Ya — teks lengkap “Fungsi StrictMode” 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 “Fungsi StrictMode”?

Pahami pemanggilan ganda dan peringatan API yang sudah usang dalam pengembangan. 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 “Fungsi StrictMode” 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

  1. Fungsi StrictMode
  2. Komponen Murni dan Menghindari Efek Samping saat Render
  3. Praktik Terbaik Key dan Ref
  4. Struktur Folder dan Konvensi Penamaan
← Kembali ke React Academy