Advanced · Level 9: React AdvancedAdvanced55 menitBahasa Indonesia

Avoiding Over-Abstraction

Memutuskan kapan repetition adalah pola yang layak diekstrak dan kapan code lokal yang sederhana lebih mudah dirawat.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Membedakan repetition dangkal dari pola yang memiliki aturan bersama
Menilai biaya API component baru terhadap manfaatnya
Menulis alasan teknis untuk mengekstrak atau mempertahankan code lokal

ReactRefactoringComponent APIMaintainability

Isi lesson

5 blok

1.
Jangan abstraksikan bentuk sebelum memahami alasanBelum selesaiWajib
2.
Bandingkan bentuk yang kebetulan mirip dan aturan yang benar-benar samaBelum selesaiWajib
3.
Pakai empat pertanyaan sebelum extractBelum selesaiWajib
4.
Cek pemahamanBelum selesaiWajib
5.
RingkasanBelum selesaiWajib

Jangan abstraksikan bentuk sebelum memahami alasan

Wajib

Dua potong JSX yang mirip belum selalu berarti harus menjadi component baru. Pertanyaan pentingnya: apakah mereka punya struktur yang stabil, behavior atau accessibility rule yang sama, dan kemungkinan perubahan yang akan bergerak bersama? Jika ya, extraction dapat mengurangi bug serta membuat API lebih jelas.

Sebaliknya, component seperti BaseBox, GenericSection, atau UniversalField sering memindahkan complexity ke prop yang panjang, conditional bercabang, dan caller yang sulit dibaca. Code lokal yang pendek dapat lebih murah dipahami daripada abstraction yang hanya dipakai sekali. Biarkan pola terbukti melalui penggunaan sebelum membuat API besar.

Bagian ini memengaruhi progres lesson.

Bandingkan bentuk yang kebetulan mirip dan aturan yang benar-benar sama

Wajib

tsx

// Biarkan lokal: dua label status sederhana dengan content berbeda.
function ProfileStatus() {
  return <p>Status profile: aktif</p>;
}

function BillingStatus() {
  return <p>Pembayaran berikutnya: 12 Juni</p>;
}

// Ekstrak bila rule label, hint, error, dan input dipakai berulang.
function FormField({ id, label, hint, error, children }) {
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      {children}
      {hint ? <p id={id + "-hint"}>{hint}</p> : null}
      {error ? <p id={id + "-error"} role="alert">{error}</p> : null}
    </div>
  );
}

Dua status di atas hanya memiliki bentuk paragraf yang sama; tujuan dan perubahan masa depannya tidak terbukti sama. FormField membawa aturan berulang yang lebih bermakna: hubungan label-input, hint, error, dan layout. Extraction pada kasus kedua dapat mengurangi kesalahan saat form bertambah.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Pakai empat pertanyaan sebelum extract

Tanyakan: apakah pattern sudah dipakai lebih dari sekali atau segera akan dipakai ulang? Apakah bagian yang sama memiliki aturan atau behavior bersama? Apakah nama component baru menjelaskan tanggung jawabnya? Apakah caller setelah refactor lebih mudah dibaca? Bila sebagian besar jawabannya tidak, pertahankan code lokal dulu.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Manakah alasan paling kuat untuk mengekstrak component baru?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Repetition yang memiliki aturan bersama lebih layak diekstrak daripada kesamaan bentuk kecil.
API component harus membuat caller lebih mudah dibaca, bukan menyembunyikan conditional di banyak prop.
Code lokal yang pendek sering menjadi pilihan yang tepat sampai pola benar-benar terbukti.
Berikutnya, Uji Kompetensi akan meminta kamu membangun satu pattern yang reusable dan menjelaskan batasnya.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Jangan abstraksikan bentuk sebelum memahami alasan.

Memuat progres Review module