React Hooks: useState dan useEffect untuk Pemula

React Hooks mengubah cara kita menulis komponen React. Dua hooks paling penting untuk dipahami adalah useState dan useEffect.

useState: Managing Component State

Hook useState memungkinkan kita menambahkan state ke functional components.

Syntax Dasar

Contoh sederhana penggunaan useState:

example.tsx

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Keterangan: tombol akan menambah nilai count setiap kali diklik.

State dengan Object

Ketika menyimpan objek di state, gunakan functional update untuk menjaga immutability:

example.tsx

function UserProfile() {
  const [user, setUser] = useState({ name: '', email: '', age: 0 });

  const updateName = (newName: string) => {
    setUser((prev) => ({ ...prev, name: newName }));
  };

  return (
    <form>
      <input
        value={user.name}
        onChange={(e) => updateName(e.target.value)}
        placeholder="Name"
      />
    </form>
  );
}

useEffect: Side Effects dan Lifecycle

Hook useEffect menggantikan componentDidMount, componentDidUpdate, dan componentWillUnmount.

Basic Effect

Contoh melakukan fetch data saat component mount:

example.tsx

import { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fetch data ketika component mount
    fetch('/api/users')
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []); // Empty dependency array = run once

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Effect dengan Dependencies

Gunakan dependency array untuk menjalankan effect saat nilai tertentu berubah:

example.tsx

function SearchResults({ query }: { query: string }) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!query) return;

    setLoading(true);

    fetch(`/api/search?q=${query}`)
      .then((res) => res.json())
      .then((data) => {
        setResults(data);
        setLoading(false);
      });
  }, [query]); // Re-run ketika query berubah

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      {results.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}

Cleanup Function

Contoh effect yang membutuhkan cleanup (mis. interval atau subscription):

example.tsx

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function
    return () => clearInterval(interval);
  }, []);

  return <div>Timer: {seconds}s</div>;
}

Best Practices

1. Multiple useState untuk State yang Tidak Related

Gunakan beberapa state terpisah untuk nilai yang tidak terkait:

example.tsx

// ✅ Good
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [loading, setLoading] = useState(false);

// ❌ Avoid
const [state, setState] = useState({ name: '', email: '', loading: false });

2. Custom Hooks untuk Logic Reuse

Pisahkan logic reusable ke dalam custom hooks:

example.tsx

function useLocalStorage(key: string, initialValue: any) {
  const [value, setValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setStoredValue = (newValue: any) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue];
}

// Usage
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current theme: {theme}
    </button>
  );
}

3. Optimasi dengan useCallback dan useMemo

Gunakan useMemo dan useCallback untuk menghindari perhitungan ulang yang mahal atau re-render yang tidak perlu:

example.tsx

import { useState, useEffect, useCallback, useMemo } from 'react';

function ExpensiveComponent({ users }: { users: User[] }) {
  const [filter, setFilter] = useState('');

  // Memoize expensive calculation
  const filteredUsers = useMemo(() => {
    return users.filter((user) =>
      user.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [users, filter]);

  // Memoize callback function
  const handleSearch = useCallback((searchTerm: string) => {
    setFilter(searchTerm);
  }, []);

  return (
    <div>
      <SearchInput onSearch={handleSearch} />
      <UserList users={filteredUsers} />
    </div>
  );
}

Common Pitfalls

1. Stale Closure

Contoh masalah stale closure dan solusinya:

example.tsx

// ❌ Problem: count akan selalu 0
function BadCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1); // Stale closure!
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
}

// ✅ Solution: gunakan functional update
function GoodCounter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prev) => prev + 1); // Always current value
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
}

Kesimpulan

useState dan useEffect adalah foundation React Hooks yang powerful untuk:

Managing component state
Handling side effects
Lifecycle management

Dengan memahami patterns dan best practices di atas, kamu bisa menulis React components yang lebih clean dan maintainable.

Ingin belajar hooks lanjutan seperti useContext, useReducer, dan custom hooks? Check out tutorial selanjutnya!