Intermediate · Level 7: React FundamentalsIntermediate50 menitBahasa Indonesia

Lifting State When Needed

Memindahkan state ke parent terdekat saat beberapa component perlu membaca atau mengubah data yang sama.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Menjelaskan alasan state dipindah ke parent
Menentukan closest shared parent untuk state bersama
Mengirim handler dari parent ke child lewat props

ReactStateComposition

Isi lesson

6 blok

1.
State tinggal di tempat yang membutuhkan kendaliBelum selesaiWajib
2.
Parent menyimpan notes, child mengirim submitBelum selesaiWajib
3.
Checklist sebelum mengangkat stateBelum selesaiWajib
4.
Coding practiceBelum selesaiWajib
5.
Cek pemahamanBelum selesaiWajib
6.
RingkasanBelum selesaiWajib

State tinggal di tempat yang membutuhkan kendali

Wajib

Tidak semua state harus naik ke parent. Jika state hanya dipakai oleh satu component, biarkan di component itu. Tetapi saat dua component perlu membaca atau mengubah data yang sama, state biasanya dipindah ke parent terdekat yang menaungi keduanya.

Ini disebut lifting state up. Tujuannya bukan membuat parent menjadi besar, tetapi membuat sumber data bersama berada di satu tempat yang jelas.

Bagian ini memengaruhi progres lesson.

Parent menyimpan notes, child mengirim submit

Wajib

tsx

import { useState } from "react";

type Note = {
  id: string;
  title: string;
};

function NotesApp() {
  const [notes, setNotes] = useState<Note[]>([]);

  function handleAddNote(title: string) {
    setNotes([...notes, { id: title.toLowerCase(), title }]);
  }

  return (
    <section>
      <NoteForm onAddNote={handleAddNote} />
      <NoteList notes={notes} />
    </section>
  );
}

`NotesApp` menyimpan notes karena form perlu menambah note dan list perlu membaca notes. Form cukup menerima handler `onAddNote`.

Bagian ini memengaruhi progres lesson.

Tips

Wajib

Checklist sebelum mengangkat state

Tanya tiga hal: component mana yang membaca data ini, component mana yang mengubah data ini, dan parent terdekat mana yang menaungi mereka. Letakkan state di parent itu, lalu kirim data dan handler lewat props.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Lift state untuk form dan list

Latihan menaruh notes di parent agar NoteForm bisa menambah data dan NoteList bisa membaca data.

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.

9 cek otomatis4 checklist

Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Kapan state sebaiknya dipindah ke parent?

Progres lesson naik setelah jawaban benar.

Ringkasan

Wajib

State lokal tetap lokal jika hanya satu component yang membutuhkannya.
State diangkat ke parent saat beberapa component perlu berbagi data.
Closest shared parent adalah tempat awal yang paling masuk akal.
Child bisa mengubah state parent lewat handler props.
Berikutnya, Uji Kompetensi menggabungkan controlled input, submit, composition, dan state boundary.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: State tinggal di tempat yang membutuhkan kendali.

Memuat progres Review module