Mengenal React Hooks: useState dan useEffect | SimpleBlog

React Hooks telah mengubah cara kita menulis komponen React. Dua hooks yang paling sering digunakan adalah useState dan useEffect.

useState: Mengelola State

useState memungkinkan kita menambahkan state ke functional component:

import { useState } from 'react'

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

  return (
    <div>
      <p>Kamu sudah klik {count} kali</p>
      <button onClick={() => setCount(count + 1)}>
        Klik saya
      </button>
    </div>
  )
}

Tips useState

Lazy initialization — Untuk state yang membutuhkan komputasi berat:

const [data, setData] = useState(() => {
  return expensiveComputation()
})

Functional updates — Saat state baru bergantung pada state sebelumnya:

setCount(prev => prev + 1)

useEffect: Menangani Side Effects

useEffect digunakan untuk operasi yang memiliki efek samping seperti fetching data, subscriptions, atau manipulasi DOM:

import { useState, useEffect } from 'react'

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    async function fetchUser() {
      const response = await fetch(`/api/users/${userId}`)
      const data = await response.json()
      setUser(data)
    }
    fetchUser()
  }, [userId]) // Re-run saat userId berubah

  if (!user) return <p>Loading...</p>
  return <h1>{user.name}</h1>
}

Cleanup Function

Jangan lupa cleanup untuk menghindari memory leaks:

useEffect(() => {
  const subscription = eventSource.subscribe(handler)

  return () => {
    subscription.unsubscribe() // Cleanup!
  }
}, [])

Aturan Hooks: Selalu panggil hooks di level teratas komponen, jangan di dalam loop, kondisi, atau nested function.

Dengan memahami kedua hooks ini, kamu sudah memiliki fondasi kuat untuk membangun aplikasi React modern! 💪