ReactJs – State

Berbeda dengan props yang sifatnya hanya read-only, state merupakan object yang berada dalam lingkup component dimana kita bisa membaca dan merubah isinya.

Lalu, kenapa kita menggunakan state bukan variable?

State dan variable memiliki perbedaan dimana ketika nilai state itu berubah, maka component akan di render ulang. Biar lebih jelas mari kita buat sebuah component baru bernama counter seperti code dibawah

import React from 'react';

const Counter = () => {
  let number = 0;
  const increment = () => {
    number = number + 1;
    console.log(number);
  };
  return (
    <div>
      <h2>Counter</h2>
      <p>nilai saat ini {number}</p>
      <button
        onClick={increment}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        tambah
      </button>
    </div>
  );
};

export default Counter;

Code diatas seharusnya bisa untuk menampilkan nilai dari variable number, tetapi yang terjadi tidak seperti itu. Apakah fungsi increment kita salah? tentu tidak. Itu karena component counter tidak di render ulang. Jika kalian inspect element dan buka tab console, akan terlihat bahwa variable number terus bertambah. Kita coba modifikasi code kita lagi dengan menggunakan state. Kali ini kita gunakan react hook useState.

import React, { useState } from 'react';

const Counter = () => {
  const [number, setNumber] = useState(0);
  const increment = () => {
    setNumber(number + 1);
    console.log(number);
  };

  return (
    <div>
      <h2>Counter</h2>
      <p>nilai saat ini {number}</p>
      <button
        onClick={increment}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        tambah
      </button>
    </div>
  );
};

export default Counter;

Jika kalian cek di browser dan click tombol increment, seharusnya nilai dari number sudah bertambah dan tampil di browser.