Bagaimana Cara Memahami useState Hooks pada React/Next JS?
Tags: javascript, nextjs, react
Published: 2024-06-02 15:10:02


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esru9w7k8vihe9aumb6i.png)

Buat temen-temen yang mungkin baru saja belajar tentang react js/next js atau belum pernah belajar sama sekali. Sepertinya artikel ini wajib untuk dibaca sampai akhir, tenang nggak banyak kok. Kalau temen-temen pernah buka dokumentasi tentang [useEffect](https://legacy.reactjs.org/docs/hooks-effect.html) dan berakhir pusing, saya akan coba bantu jelaskan sedikit.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlty4kohply4jhpvtse9.png)

Gambar diatas merupakan alur kerja react ketika merender sebuah komponen. Nah, tentu saja kita sebagai developer gak mau tau dong bagaimana proses yang berjalan dibelakang yang terpenting kita maunya komponen harus bisa dirender sekali ataupun berkali kali. Tapi, pertanyaanya sekarang, bagaimana cara kita untuk mengubah hasil render komponen yang sudah dirender react? Tenang, jangan dipikir terlalu jauh, useEffect hooks ini adalah solusinya.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcn81vyeerud65gnkodt.png)

Kalau kita lihat dokumentasi yang disediakan oleh React JS, disana dijelaskan bahwa useEffect ini adalah hasil kombinasi dari componentDidMount, componentDidUpdate, dan componentWillUnmount ketika temen-temen menggunakan [Class Component](https://react.dev/reference/react/Component), tetapi jika temen-temen menggunakan [Functional Component](https://react.dev/reference/react/Component#migrating-a-simple-component-from-a-class-to-a-function) maka, temen-temen bisa menggunakan useEffect hooks ini. Kita langsung praktik pakai coding biar gak kebayang-bayang terus.

---

```javascript
import React, { useEffect, useState } from 'react'

const Home = () => {
    const [counter, setCounter] = useState<number>(0);

    useEffect(() => {
        console.log('Running usEffect tanpa Array')
    })

    useEffect(() => {
        console.log('Running usEffect dengan array kosong')
    }, [])

    useEffect(() => {
        console.log('Ada yang berubah nih dari state counter')
    }, [counter])

    return (
        <div className="flex flex-row justify-center items-center gap-2 mt-10">
            <span>{counter}</span>
            <button className="bg-gray-400 p-2 rounded-md text-white" onClick={() => setCounter((s) => s + 1)}>Increment</button>
        </div>
    )
}

export default Home
```

Bisa temen-temen lihat kode program diatas, ada 3 cara untuk mendefinisikan useEffect itu sendiri. Nah, perbedaanya ada pada [Array of Dependencies](https://react.dev/reference/react/useEffect#examples-dependencies)

useEffect dengan array of dependencies kosong

```javascript
useEffect(() => {
  console.log('Running usEffect dengan array kosong')
}, [])
```

Ketika temen-temen mendefinisikan useEffect dengan cara seperti ini maka semua kode program yang ada di dalam useEffect akan dijalankan hanya 1 kali ketika component itu dirender.

Hasil console useEffect dengan array of dependencies kosong:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8kzbmi2ltfus08c0zn3d.png)

useEffect dengan array of dependencies ada isinya

```javascript
const [counter, setCounter] = useState<number>(0);

useEffect(() => {
  console.log('Running usEffect dengan array kosong')
}, [counter])
```

Ketika temen-temen mendefinisikan useEffect dengan cara seperti ini maka semua kode program yang ada di dalam useEffect akan dijalankan ketika component dirender dan dijalankan kembali apabila ada perubahan terhadap state yang dimasukkan ke dalam arraynya.

```javascript
import React, { useEffect, useState } from 'react'

const Home = () => {
    const [counter, setCounter] = useState<number>(0);

    useEffect(() => {
        console.log('Ada yang berubah nih dari state counter')
    }, [counter])

    return (
        <div className="flex flex-row justify-center items-center gap-2 mt-10">
            <span>{counter}</span>
            <button 
                className="bg-gray-400 p-2 rounded-md text-white" 
                onClick={() => setCounter((s) => s + 1)}
            >Increment</button>
        </div>
    )
}

export default Home
```

Contohnya misal user itu menekan tombol Increment maka semua kode program yang ada di dalam useEffect itu akan dijalankan kembali, tetapi jika tidak ada perubahan state maka semua kode program yang ada di dalam useEffect tersebut tidak akan dijalankan.

Hasil console useEffect dengan array of dependencies ada isinya:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6y4sh18mfiae9nc3qxrq.png)

useEffect tanpa array of dependencies

```javascript
const [counter, setCounter] = useState<number>(0);
const [time, setTime] = useState<number>(0);

useEffect(() => {
  console.log('Running usEffect tanpa Array')
})
```

Ketika temen-temen mendefinisikan useEffect dengan cara seperti ini maka semua kode program yang ada di dalam useEffect ini akan dijalankan apabila ada perubahan dari semua state.

```javascript
import React, { useEffect, useState } from 'react'

const Home = () => {
    const [counter, setCounter] = useState<number>(0);
    const [time, setTime] = useState<number>(0);

    useEffect(() => {
        console.log(
          `Running usEffect tanpa Array 
          counter: ${counter} time: ${time}
         `)
    })

    return (
        <div className="flex flex-row justify-center items-center gap-2 mt-10">
            <span>{counter}</span>
            <span>{time}</span>
            <button 
              className="bg-gray-400 p-2 rounded-md text-white" 
              onClick={() => setCounter((s) => s + 1)}
            >Increment</button>
            <button 
              className="bg-gray-400 p-2 rounded-md text-white" 
              onClick={() => setTime((s) => s + 1)}
            >Time</button>
        </div>
    )
}

export default Home
```

Hasil console useEffect dengan array of dependencies kosong:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6rmeqntk3897is4q5go.png)

---
Bagaimana apakah penjelasan diatas mudah dipahami? kalau malah bikin temen-temen pusing maap ye bro wkwk. Kurang lebih seperti itu penjelasan yang bisa saya sampaikan tentang useEffect pada React/Next JS yang mana penjelasannya saya usahakan sesimple mungkin dengan analogi yang cukup sederhana juga. Sampai bertemu di lain artikel yang lebih menarik! Tengkyu brokk!