Lifting State Up — CompileDaily Study

Penjelasan

Kalau dua komponen anak perlu berbagi/sinkron data yang sama, state-nya harus dipindah ("diangkat") ke komponen INDUK terdekat yang menaungi keduanya — induk itu lalu mengirim state dan fungsi pengubahnya ke kedua anak lewat props. Pola ini disebut "lifting state up", dan merupakan cara standar berbagi state di React tanpa library tambahan.

Contoh Konsep

import { useState } from 'react';

function InputSuhu({ suhu, onUbah }) {
    return <input value={suhu} onChange={(e) => onUbah(e.target.value)} />;
}

function TampilanSuhu({ suhu }) {
    return <p>Suhu saat ini: {suhu}°C</p>;
}

function App() {
    const [suhu, setSuhu] = useState('25'); // state diangkat ke sini

    return (
        <div>
            <InputSuhu suhu={suhu} onUbah={setSuhu} />
            <TampilanSuhu suhu={suhu} />
        </div>
    );
}

Praktikum

Buat komponen InputPencarian (menerima props kataKunci dan onUbah) dan HasilPencarian (menerima props kataKunci, menampilkan "Mencari: {kataKunci}"). Angkat state kataKunci ke komponen App, sambungkan ke keduanya lewat props.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Aturan sederhana untuk menentukan di mana state harus berada: taruh state di komponen INDUK PALING DEKAT yang menaungi SEMUA komponen yang membutuhkan data itu — jangan taruh terlalu tinggi (di App kalau tidak perlu) karena bikin re-render tidak perlu di komponen yang jauh dari situ.