Model Mental React 19: State, Props, Re-rendering & Komposisi
Merancang Komponen Modular yang Bersih dari Prop Drilling dan Re-render Liar
01. Target Pembelajar & Prasyarat
Developer yang ingin menguasai React modern tanpa mitos.
02. Kompetensi Konseptual (Level 1ā2)
- āMenjelaskan siklus render React: Trigger -> Render -> Commit.
03. Kompetensi Praktis & Artefak Nyata (Level 3ā4)
- āMembangun hierarki komponen yang mengisolasi re-render ke elemen terkecil.
04. Aplikasi Nyata & Verifikasi
Penerapan Industri: Komponen interaktif kalkulator pesanan katalog Z-Automation.
Metode Verifikasi: Memeriksa React DevTools Profiler untuk memastikan komponen induk tidak re-render saat anak berubah.
Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?
Pahami bagaimana React 19 menyinkronkan state dengan DOM, peran immutability, pemisahan container vs presentational component, dan optimalisasi render.
Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.
Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol
Siklus Render: Trigger, Render & Commit
Banyak developer mengira state React berubah seketika selayaknya variabel JavaScript biasa. Faktanya, memanggil setState seperti meminta giliran render berikutnya. React menjadwalkan pembaruan, mengeksekusi fungsi komponen (Render), dan mengaplikasikan perubahan minimal ke browser DOM (Commit).
Batas Arsitektur Server vs Client di Next.js 16 App Router
Browser meminta URL /edukasi-demo/paket-01 melalui HTTP GET.
{
"method": "GET",
"path": "/edukasi-demo/paket-01",
"headers": {
"accept": "text/html"
}
}Koreksi Asumsi Umum vs Realitas Rekayasa
āRe-render di React selalu berarti memperbarui seluruh elemen DOM asli.ā
React hanya memanggil fungsi komponen untuk menghasilkan Virtual DOM baru, lalu melakukan diffing untuk hanya memperbarui node DOM yang berubah (Commit Phase).
Implementasi Langkah-demi-Langkah
Hasil akhir yang diharapkan: Komponen React yang mengisolasi input tanpa membebani komponen induk.
lab-b2-m1/ āāā IsolatedState.tsx
1Implementasi Komponen Reaktif Bersih
Komponen dengan state lokal independen.
| 1 | "use client"; |
| 2 | import React, { useState } from "react"; |
| 3 | |
| 4 | export function CounterBadge() { |
| 5 | const [count, setCount] = useState(0); |
| 6 | return ( |
| 7 | <button |
| 8 | onClick={() => setCount(c => c + 1)} |
| 9 | style={{ padding: "8px 16px", background: "#1A2FFB", color: "#FFF", borderRadius: "6px" }} |
| 10 | > |
| 11 | Jumlah Klik: {count} |
| 12 | </button> |
| 13 | ); |
| 14 | } |
Tombol yang memperbarui angka secara reaktif.
Mengantisipasi Masalah Umum & Tantangan Ekstensi
Tambahkan tombol Reset dengan konfirmasi.
Uji Kompetensi Mandiri & Verifikasi Hasil
Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.
BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)
01.Mengapa kita tidak boleh melakukan mutasi array langsung seperti 'state.push(item)' di React?
BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN ā MIN. 21 POIN)
Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar: