State dan useState React

State adalah salah satu konsep penting dalam ekosistem React. State bisa dikatakan sebagai data privat dari sebuah komponen, bersifat encapsulated yang berarti state dari sebuah komponen tidak bisa dipengaruhi dan mempengaruhi state komponen lain secara langsung. Selain itu, nilai pada state akan tereset ke nilai awal ketika halaman direload atau ketika komponen dirender kembali.

CodeSandBox.io Online IDE memudahkan kita untuk mencoba jalankan kode React

Pada function component React, state termasuk dalam bagian React hook. Kita perlu mengimpor state dan mendeklarasikannya agar bisa digunakan pada komponen React. Berikut ini beberapa contoh penggunaan state:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import React, { useState } from "react"

function App() {
  const [count, setCount] = useState(0)

  const addCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={addCount}>Tambah</button>
    </div>
  )
}

export default App
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { useState } from "react"

const ButtonAdd = (props) => {
  return <button onClick={props.addCount}>Tambah</button>
}

const App = () => {
  const [count, setCount] = useState(0)

  const addCount = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>{count}</h1>
      <ButtonAdd addCount={addCount} />
    </div>
  )
}

export default App

Pada Contoh State antar Komponen React di atas menunjukkan bahwa kita bisa mengubah state pada komponen parent dari komponen child melalui method yang ada pada object props.

Penggunaan State

Terdapat 3 hal yang perlu Anda ketahui tentang penggunaan state.

Jangan Memodifikasi State Secara Langsung

Sebagai contoh kode berikut ini tidak akan terupdate.

1
2
3
4
const [data, setData] = useState({})

// Tidak boleh memodifikasi nilai state secara langsung
data.comment = "Hello"

Melainkan gunakan cara berikut:

1
2
3
4
const [data, setData] = useState({})

// gunakan fungsi setData
setData({ comment: "Hello" })

setState bersifat Asynchronous

Pada contoh sebelumnya, method setState() hanya dipanggil satu kali dalam sebuah fungsi. Namun cara pemanggilan tersebut tidak akan bekerja dengan baik jika dilakukan beberapa sekaligus dalam satu fungsi, sebagai contoh kode di bawah ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import React, { useState } from "react"

export default function App() {
  const [data, setData] = useState(0)

  const addData = () => {
    setData(data + 1) // harapan: data = data + 1
    setData(data + 1) // harapan: data = data + 1
    setData(data + 1) // harapan: data = data + 1
  }

  return (
    <div className='App'>
      <h1>{data}</h1>
      <button onClick={addData}>klik me</button>
    </div>
  )
}

Pada kode baris 7 sampai 9 kita berharap data yang didapatkan terupdate dengan penambahan 1 sebanyak 3 kali, semisal nilai data awal 1 maka nilai akhirnya adalah 4. Setelah dicoba ternyata nilai data akhir bernilai 1, hal ini terjadi karena masing-masing method setData() berjalan asinkron dengan menggunakan nilai data awal yang sama.

Agar method setData() berjalan secara sinkron, kita perlu memasukkan callback fungsi sebagai argumen. Mari kita coba cara di bawah ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { useState } from "react"

export default function App() {
  const [data, setData] = useState(0)

  function update(data) {
    return data+1
  }

  const addData = () => {
    setData(update)
    setData(update)
    setData(update)
  }

  return (
    <div className='App'>
      <h1>{data}</h1>
      <button onClick={addData}>klik me</button>
    </div>
  )
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import React, { useState } from "react"

export default function App() {
  const [data, setData] = useState(0)

  const addData = () => {
    setData(data => data+1)
    setData(data => data+1)
    setData(data => data+1)
  }

  return (
    <div className='App'>
      <h1>{data}</h1>
      <button onClick={addData}>klik me</button>
    </div>
  )
}

Terjadinya sinkronisasi pada ketiga setData() karena nilai dari parameter data yang digunakan berasal dari nilainya yang terbaru.

©2021, All Rights Reserved

Privacy Policy | DMCA | Telegram