🔧 Bagaimana Cara Memahami useState Hooks pada React/Next JS?

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 dan berakhir pusing, saya akan coba bantu jelaskan sedikit.

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.

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, tetapi jika temen-temen menggunakan Functional Component maka, temen-temen bisa menggunakan useEffect hooks ini. Kita langsung praktik pakai coding biar gak kebayang-bayang terus.

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

useEffect dengan array of dependencies kosong

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:

useEffect dengan array of dependencies ada isinya

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.

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:

useEffect tanpa array of dependencies

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.

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:

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!