Intermediate · Level 8: React IntermediateIntermediate50 menitBahasa Indonesia

State Colocation

Menjaga state tetap dekat dengan component yang benar-benar memakai dan mengubahnya.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan state colocation sebagai penempatan state dekat dengan pemakainya
Membedakan state lokal dari state yang perlu dibagikan
Memindahkan state UI kecil ke component yang memilikinya

ReactStateComponent Design

Isi lesson

6 blok

1.
State sebaiknya tinggal dekat dengan alasan ia adaBelum selesaiWajib
2.
State buka-tutup milik cardBelum selesaiWajib
3.
Naikkan state hanya saat ada pemakai bersamaBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

State sebaiknya tinggal dekat dengan alasan ia ada

Wajib

State tidak harus selalu berada di component paling atas. Jika hanya satu component yang membaca dan mengubah sebuah value, simpan state di component itu. Ini disebut state colocation: data interaktif tinggal sedekat mungkin dengan UI yang memilikinya.

Contohnya, apakah deskripsi satu card sedang terbuka biasanya hanya penting bagi card tersebut. Parent tidak perlu mengelola `isOpen` hanya untuk meneruskannya kembali lewat props. Parent baru perlu memiliki state ketika beberapa child perlu membaca atau mengubah value yang sama.

Bagian ini memengaruhi progres lesson.

State buka-tutup milik card

Wajib

tsx

import { useState } from "react";

type Lesson = {
  title: string;
  description: string;
};

function LessonCard({ lesson }: { lesson: Lesson }) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <article>
      <h2>{lesson.title}</h2>
      <button type="button" onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? "Sembunyikan detail" : "Lihat detail"}
      </button>
      {isOpen ? <p>{lesson.description}</p> : null}
    </article>
  );
}

`isOpen` hanya memengaruhi satu `LessonCard`, jadi state tinggal di sana. Parent cukup mengirim data lesson dan tidak perlu mengetahui apakah detail card sedang terlihat.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Naikkan state hanya saat ada pemakai bersama

Mulai dari component yang paling dekat. Naikkan state ke parent terdekat jika dua atau lebih child perlu membaca atau mengubah value yang sama. Jangan menaikkan state hanya agar semua state terlihat di satu file; props yang berlebihan justru bisa menyamarkan siapa pemilik behavior itu.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Pindahkan state panel ke LessonCard

Latihan menjaga state buka-tutup tetap di component card yang memilikinya.

Tujuan awal: Fokus di tab TSX.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

`isEditing` hanya mengatur form kecil di dalam satu `ProfileCard`. Lokasi state yang paling masuk akal adalah...

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

Mulai dari state lokal di component yang memakai behavior tersebut.
Naikkan state hanya saat ada beberapa pemakai yang membutuhkan sumber value sama.
State colocation mengurangi props yang hanya diteruskan tanpa alasan kuat.
Pemilik state seharusnya mudah dijelaskan dari UI yang dikendalikan.
Berikutnya, kamu akan menghapus state yang sebenarnya bisa dihitung saat render.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: State sebaiknya tinggal dekat dengan alasan ia ada.

Memuat progres Review module