State dalam ReactJS

   March 20, 2025       Mahatma Mahardhika

---

State dalam ReactJS

Table of Contents

• Pengertian State
• Cara Menggunakan State
• Perbedaan State dan Props
• Managing State dengan useState
• Manfaat dan Keuntungan
• Contoh Penerapan
• Kesimpulan

---

Pengertian State

State dalam ReactJS adalah objek yang menyimpan data atau status suatu komponen. State memungkinkan komponen merespons perubahan data secara dinamis tanpa harus me-reload halaman.

---

Cara Menggunakan State

State digunakan dalam komponen berbasis fungsi menggunakan hook useState atau dalam class component menggunakan this.state.

State dalam Functional Component

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    

      
Nilai: {count}
      
    
  );
}

State dalam Class Component

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      

        
Nilai: {this.state.count}
        
      
    );
  }
}

---

Perbedaan State dan Props

State	Props
Dapat diubah oleh komponen itu sendiri	Bersifat read-only, tidak dapat diubah oleh komponen penerima
Berlaku hanya dalam komponen yang mendefinisikannya	Dikirim dari parent ke child component
Digunakan untuk data yang berubah secara dinamis	Digunakan untuk data yang bersifat statis atau berasal dari parent

---

Managing State dengan useState

Hook useState digunakan dalam komponen fungsional untuk mengelola state dengan cara yang lebih sederhana.

const [name, setName] = useState("John");

const changeName = () => {
  setName("Alice");
};

---

Manfaat dan Keuntungan

• Reaktivitas: Komponen dapat merespons perubahan data secara otomatis.
• Modularitas: Memisahkan logika dan tampilan dengan lebih baik.
• Mudah dikelola: Dengan bantuan React hooks seperti useState, manajemen state menjadi lebih sederhana.

---

Contoh Penerapan

State digunakan dalam berbagai skenario, seperti:

• Form Handling: Menyimpan input pengguna sebelum dikirim ke backend.
• Dark Mode Toggle: Mengubah tema aplikasi secara dinamis.
• Cart Management: Menambahkan dan menghapus produk dalam aplikasi e-commerce.

---

Kesimpulan

State adalah salah satu fitur utama ReactJS yang memungkinkan komponen untuk menyimpan dan mengelola data yang berubah secara dinamis. Dengan memahami cara kerja state dan bagaimana menggunakannya dengan React hooks atau class components, pengembang dapat membangun aplikasi yang lebih interaktif dan efisien.