Lifting State Up (Biar Bisa Dipakai di Atas) - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

1. Apa Itu Lifting State Up?

Dalam React, ada saatnya kita punya state di satu komponen, tetapi butuh data tersebut di komponen lain yang sejajar atau di atasnya. Solusinya? Lifting State Up!

Lifting state up berarti mengangkat state ke komponen yang lebih tinggi sehingga bisa digunakan oleh banyak komponen anak.

Bayangkan ada dua anak yang ingin berbagi mainan. Daripada mainannya cuma dipegang satu anak, lebih baik mainannya disimpan oleh ibunya (komponen parent), lalu diberikan ke anak-anak saat dibutuhkan. Nah, konsep lifting state up ini seperti itu!

2. Kenapa Perlu Lifting State Up?

• Menghindari duplikasi state di beberapa komponen.
• Memudahkan komunikasi antara komponen saudara.
• Membuat kode lebih terstruktur dan mudah dikelola.

3. Contoh Masalah Tanpa Lifting State Up

Misalnya kita punya dua input untuk suhu dalam Celsius dan Fahrenheit, tapi mereka tidak bisa saling berkomunikasi karena masing-masing punya state sendiri:

const CelsiusInput = () => {
  const [celsius, setCelsius] = useState(0);
  return (
    <input
      type="number"
      value={celsius}
      onChange={(e) => setCelsius(e.target.value)}
    />
  );
};

const FahrenheitInput = () => {
  const [fahrenheit, setFahrenheit] = useState(32);
  return (
    <input
      type="number"
      value={fahrenheit}
      onChange={(e) => setFahrenheit(e.target.value)}
    />
  );
};

Hasilnya? Input Celsius dan Fahrenheit tidak bisa saling mengupdate satu sama lain. Kasihan kan?

4. Solusi dengan Lifting State Up

Kita pindahkan state ke komponen parent, lalu bagikan state ke komponen anak melalui props.

const TemperatureConverter = () => {
  const [temperature, setTemperature] = useState(0);

  return (
    <div>
      <CelsiusInput value={temperature} onChange={setTemperature} />
      <FahrenheitInput value={temperature} onChange={setTemperature} />
    </div>
  );
};

const CelsiusInput = ({ value, onChange }) => {
  return (
    <input
      type="number"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    />
  );
};

const FahrenheitInput = ({ value, onChange }) => {
  return (
    <input
      type="number"
      value={(value * 9/5) + 32}
      onChange={(e) => onChange((e.target.value - 32) * 5/9)}
    />
  );
};

5. Penjelasan Kode

• State temperature ada di TemperatureConverter, sehingga kedua input bisa berbagi data.
• Props value dan onChange digunakan di input, jadi mereka bisa saling memperbarui.
• Saat Celsius diubah, Fahrenheit ikut berubah, begitu juga sebaliknya.

6. Kapan Harus Menggunakan Lifting State Up?

Gunakan lifting state up ketika:  Dua atau lebih komponen butuh menggunakan data yang sama.  Perubahan di satu komponen harus mempengaruhi komponen lain. Ingin menghindari duplikasi state yang bisa bikin bug.

7. Kesimpulan

 Lifting State Up mengangkat state ke parent agar bisa digunakan oleh banyak komponen anak.  Menghindari duplikasi state dan mempermudah komunikasi antar-komponen.  Gunakan props untuk mengirim state dan fungsi update ke komponen anak.

Dengan lifting state up, aplikasi React kita jadi lebih terstruktur dan mudah dikelola. Jadi, kalau ada state yang perlu dipakai di beberapa tempat, angkat aja ke atas!