React Hooks Deep Dive — Kuasai Pengembangan React Modern

Pendahuluan: Revolusi React Hooks

React Hooks, diperkenalkan di React 16.8, secara fundamental mengubah cara kita menulis React components. Dengan mengaktifkan functional components untuk menggunakan state dan lifecycle methods, Hooks mengeliminasi kebutuhan untuk class components di sebagian besar skenario, menghasilkan kode yang lebih rapi dan maintainable.

Panduan komprehensif ini mencakup semua yang perlu Kamu kuasai tentang React Hooks, dari basic hooks seperti useState dan useEffect hingga advanced patterns dengan custom hooks dan optimasi performa.

Apa itu React Hooks?

React Hooks adalah functions yang memungkinkan Kamu “hook into” fitur React dari functional components. Mereka memungkinkan Kamu untuk:

Kelola state tanpa class
Handle side effects secara deklaratif
Reuse logic secara stateful di berbagai components
Memecah komponen yang kompleks ke dalam functions yang lebih kecil

Memahami kemampuan-kemampuan ini adalah pondasi dari pengembangan React modern. Bagian ini mencakup konsep-konsep inti yang perlu Kamu ketahui.

Aturan Hooks

Hooks memiliki aturan ketat yang harus diikuti agar berfungsi dengan benar. Melanggar aturan ini akan menyebabkan bug yang sulit untuk di-debug.

Hanya panggil hooks di top level - Jangan panggil di dalam loops, conditions, atau nested functions
Hanya panggil hooks dari React functions - Panggil dari functional components atau custom hooks

// ❌ Salah
function Component({ condition }) {
  if (condition) {
    const [state, setState] = useState(0); // Conditional hook
  }
}

// ✅ Benar
function Component({ condition }) {
  const [state, setState] = useState(0);
  
  if (condition) {
    // Gunakan state di sini
  }
}

useState: Mengelola State

Hook useState memungkinkan Kamu menambahkan state ke functional components. Ini adalah hook yang paling dasar dan sering digunakan untuk mengelola state component.

Penggunaan Dasar

Membuat state dalam functional component dan mengubahnya menggunakan fungsi setter.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      <button onClick={() => setCount(count - 1)}>
        Decrement
      </button>
      <button onClick={() => setCount(0)}>
        Reset
      </button>
    </div>
  );
}

Functional Updates

Gunakan functional updates ketika state baru bergantung pada state sebelumnya. Pola ini sangat penting saat bekerja dengan operasi asynchronous.

function Counter() {
  const [count, setCount] = useState(0);
  
  // ❌ Bisa bermasalah dengan async updates
  const increment = () => setCount(count + 1);
  
  // ✅ Selalu aman
  const incrementSafe = () => setCount(prev => prev + 1);
  
  return (
    <button onClick={incrementSafe}>
      Count: {count}
    </button>
  );
}

State Pada Objek Yang Kompleks

Mengelola beberapa nilai yang terkait dalam state menggunakan pola spread operator untuk update yang immutable.

function UserForm() {
  const [user, setUser] = useState({
    name: '',
    email: '',
    age: 0
  });
  
  const updateField = (field, value) => {
    setUser(prev => ({
      ...prev,
      [field]: value
    }));
  };
  
  return (
    <form>
      <input 
        value={user.name}
        onChange={(e) => updateField('name', e.target.value)}
      />
      <input 
        value={user.email}
        onChange={(e) => updateField('email', e.target.value)}
      />
    </form>
  );
}

Lazy Initialization

Untuk kalkulasi state awal yang boros:

Ketika state awal memerlukan perhitungan yang kompleks, berikan function ke useState untuk menghindari perhitungan ulang di setiap render.

function Component() {
  // ❌ Berjalan di setiap render
  const [state, setState] = useState(expensiveCalculation());
  
  // ✅ Hanya berjalan sekali
  const [state, setState] = useState(() => expensiveCalculation());
}

useEffect: Side Effects & Lifecycle

Hook useEffect memungkinkan Kamu melakukan side effects di functional components. Side effects termasuk data fetching, subscriptions, manipulasi DOM, dan banyak lagi.

Penggunaan Dasar

Melakukan aksi setelah component di-render, dengan dukungan dependency arrays untuk mengontrol kapan effect berfungsi.

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    setLoading(true);
    
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]); // Re-run ketika userId berubah
  
  if (loading) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

Cleanup Functions

Membersihkan resource dengan benar untuk mencegah memory leaks. Ini sangat penting untuk timers, subscriptions, dan event listeners.

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    
    // Cleanup function
    return () => clearInterval(interval);
  }, []); // Array kosong = run sekali saat mount
  
  return <div>{seconds} detik telah berlalu</div>;
}

Pola Dependency Array

Memahami pola dependency array yang berbeda membantu Kamu mengontrol kapan effects berjalan dan menghindari bug yang sering terjadi.

// Jalankan sekali saat mount
useEffect(() => {
  console.log('Mounted');
}, []); // Array kosong

// Jalankan di setiap render (jarang dibutuhkan)
useEffect(() => {
  console.log('Rendered');
}); // Tanpa array

// Jalankan ketika dependencies berubah
useEffect(() => {
  console.log('userId atau status berubah');
}, [userId, status]); // Dengan dependencies

Multiple Effects

Memisahkan concerns ke dalam multiple effects membuat kode Kamu lebih mudah di-maintain dan ditest.

function Component({ userId }) {
  // Effect 1: Fetch user data
  useEffect(() => {
    fetchUser(userId);
  }, [userId]);
  
  // Effect 2: Setup analytics
  useEffect(() => {
    analytics.track('page_view');
  }, []);
  
  // Effect 3: Subscribe ke updates
  useEffect(() => {
    const unsubscribe = subscribeToUpdates(userId);
    return unsubscribe;
  }, [userId]);
}

Context memungkinkan berbagi data di seluruh component-tree tanpa perlu melakukan prop drilling. Prop drilling adalah proses meneruskan props dari satu komponen ke komponen lain yang berada di tengah-tengah, meskipun komponen tersebut tidak membutuhkannya secara langsung. Tetapi dengan menggunakan Context API, kita dapat menghilangkan kebutuhan untuk meneruskan props melalui banyak komponen perantara, sehingga membuat kode lebih rapih dan mudah di-maintain.

Membuat Context

Menyiapkan context provider dan custom hook untuk mengelola dan berbagi state di seluruh aplikasi kamu.

import { createContext, useContext, useState } from 'react';

// Buat context
const ThemeContext = createContext();

// Provider component
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };
  
  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom hook untuk menggunakan context
function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme harus digunakan dalam ThemeProvider');
  }
  return context;
}

// Penggunaan di components
function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button 
      style={{ 
        background: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff'
      }}
      onClick={toggleTheme}
    >
      Toggle Theme
    </button>
  );
}

useReducer: Complex State Logic

Hook useReducer digunakan untuk mengelola state yang kompleks, terutama ketika state melibatkan beberapa sub-nilai yang saling terkait atau ketika pembaruan state berikutnya bergantung pada nilai state sebelumnya. useReducer lebih cocok untuk skenario ini karena logikanya lebih terstruktur dan mudah dites dibandingkan dengan useState, yang lebih simple untuk state tunggal.

import { useReducer } from 'react';

const initialState = { count: 0, step: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':
      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload };
    case 'reset':
      return initialState;
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Step: {state.step}</p>
      
      <button onClick={() => dispatch({ type: 'increment' })}>
        +{state.step}
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        -{state.step}
      </button>
      
      <input 
        type="number" 
        value={state.step}
        onChange={(e) => dispatch({ 
          type: 'setStep', 
          payload: parseInt(e.target.value) 
        })}
      />
      
      <button onClick={() => dispatch({ type: 'reset' })}>
        Reset
      </button>
    </div>
  );
}

useRef: Mutable References

Akses DOM elements atau simpan mutable values yang tidak trigger re-renders. Tidak seperti state, update ref tidak menyebabkan component untuk di-render ulang.

DOM References

Langsung mengakses dan memanipulasi DOM elements saat diperlukan, seperti fokus pada input atau mengelola playback state.

import { useRef, useEffect } from 'react';

function AutoFocusInput() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return <input ref={inputRef} />;
}

Menyimpan Mutable Values

Menyimpan referensi ke nilai-nilai yang bertahan di antara render tapi tidak memicu re-render ulang, seperti ID interval atau nilai sebelumnya. Ini berguna untuk menyimpan data yang perlu dipertahankan selama siklus hidup komponen tanpa menyebabkan pembaruan UI yang tidak perlu. Misalnya, menyimpan ID timer, nilai sebelumnya untuk perbandingan, atau referensi ke objek eksternal. Perubahan pada ref tidak memicu render ulang, sehingga cocok untuk operasi internal yang tidak mempengaruhi tampilan.

function Timer() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef(null);
  
  const startTimer = () => {
    if (!intervalRef.current) {
      intervalRef.current = setInterval(() => {
        setSeconds(prev => prev + 1);
      }, 1000);
    }
  };
  
  const stopTimer = () => {
    clearInterval(intervalRef.current);
    intervalRef.current = null;
  };
  
  useEffect(() => {
    return () => stopTimer(); // Cleanup
  }, []);
  
  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

useMemo: Hindari Expensive Computations

Memoize kalkulasi yang boros untuk menghindari perhitungan ulang di setiap render. Gunakan ini ketika Kamu memiliki operasi yang boros atau saat melewatkan objects sebagai dependencies.

import { useMemo } from 'react';

function DataTable({ data, filter }) {
  const filteredData = useMemo(() => {
    console.log('Filtering data...');
    return data.filter(item => item.category === filter);
  }, [data, filter]);
  
  return (
    <table>
      {filteredData.map(item => (
        <tr key={item.id}>
          <td>{item.name}</td>
        </tr>
      ))}
    </table>
  );
}

useCallback: Memoized Callbacks

Memoize callback functions untuk mencegah render ulang yang tidak perlu dari components anak nya. Ini sangat penting ketika callbacks digunakan sebagai dependencies di hooks lain.

import { useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // ❌ Function baru di setiap render
  const handleClick = () => {
    setCount(prev => prev + 1);
  };
  
  // ✅ Memoized function
  const handleClickMemo = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);
  
  return <ChildComponent onClick={handleClickMemo} />;
}

Custom Hooks: Reusable Logic

Ekstrak logika komponen ke dalam fungsi yang dapat digunakan ulang. Custom hooks memungkinkan Kamu untuk berbagi logika stateful antar komponen tanpa render props atau HOCs (Higher-Order Components).

useLocalStorage Hook

Contoh praktis dari custom hook yang menyimpan state ke browser local storage.

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });
  
  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function 
        ? value(storedValue) 
        : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };
  
  return [storedValue, setValue];
}

// Penggunaan
function Component() {
  const [name, setName] = useLocalStorage('name', '');
  return <input value={name} onChange={e => setName(e.target.value)} />;
}

useFetch Hook

Custom hook untuk data fetching yang menangani loading dan error states secara otomatis.

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setError(null);
      })
      .catch(err => setError(err))
      .finally(() => setLoading(false));
  }, [url]);
  
  return { data, loading, error };
}

// Penggunaan
function UserProfile({ userId }) {
  const { data, loading, error } = useFetch(`/api/users/${userId}`);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{data.name}</div>;
}

Advanced Patterns

Mengeksplorasi pola-pola hook yang sophisticated untuk membangun components yang kompleks dan reusable.

Compound Components

Membangun component libraries yang fleksibel di mana child components bekerja sama melalui context dan props.

function Tabs({ children }) {
  const [activeTab, setActiveTab] = useState(0);
  
  return (
    <div>
      {React.Children.map(children, (child, index) =>
        React.cloneElement(child, {
          isActive: index === activeTab,
          onClick: () => setActiveTab(index)
        })
      )}
    </div>
  );
}

Kesalahan Umum

Memahami kesalahan umum saat menggunakan hooks akan membantu kamu menulis kode React yang lebih andal.

1. Dependensi yang Hilang

Lupa untuk menyertakan dependensi dalam array dependensi dari useEffect dapat menyebabkan stale closure dan bug.

// ❌ Salah - missing dependency
useEffect(() => {
  console.log(count);
}, []);

// ✅ Benar
useEffect(() => {
  console.log(count);
}, [count]);

2. Stale Closures

Ketika callback menangkap nilai lama dari closure-nya, ini bisa menyebabkan perilaku yang tidak terduga dalam kode asynchronous.

// ❌ Masalah
const handleClick = () => {
  setTimeout(() => {
    console.log(count); // Stale value
  }, 3000);
};

// ✅ Solusi
const handleClick = () => {
  setTimeout(() => {
    setCount(prev => {
      console.log(prev); // Latest value
      return prev;
    });
  }, 3000);
};

Optimasi Performa

Best practices untuk menjaga aplikasi React tetap performan saat menggunakan hooks.

Pisahkan state - Jangan taruh semuanya dalam satu state
Gunakan useMemo/useCallback dengan bijak - Jangan berlebihan
React.memo untuk memoization komponen
Lazy loading dengan React.lazy() dan Suspense
Code splitting untuk aplikasi besar

Kesimpulan

React Hooks telah merevolusi pengembangan React dengan membuat functional components lebih powerful dan kode yang lebih reusable. Beberapa poin penting yang perlu diingat:

useState untuk state management sederhana
useEffect untuk side effects dengan cleanup yang tepat
useContext untuk menghindari prop drilling
useReducer untuk logic dari state yang kompleks
Custom hooks untuk reusable logic
Selalu ikuti Rules of Hooks
Optimasi dengan useMemo dan useCallback saat dibutuhkan

Kuasai hooks ini, dan Kamu akan menulis kode React yang lebih rapi dan maintainable.

Artikel Terkait:

Terakhir diperbarui: 24 Januari 2026

Pendahuluan: Revolusi React Hooks

Daftar Isi

Apa itu React Hooks?

Aturan Hooks

useState: Mengelola State

Penggunaan Dasar

Functional Updates

State Pada Objek Yang Kompleks

Lazy Initialization

useEffect: Side Effects & Lifecycle

Penggunaan Dasar

Cleanup Functions

Pola Dependency Array

Multiple Effects

useContext: Sharing Data

Membuat Context

useReducer: Complex State Logic

useRef: Mutable References

DOM References

Menyimpan Mutable Values

useMemo: Hindari Expensive Computations

useCallback: Memoized Callbacks

Custom Hooks: Reusable Logic

useLocalStorage Hook

useFetch Hook

Advanced Patterns

Compound Components

Kesalahan Umum

1. Dependensi yang Hilang

2. Stale Closures

Optimasi Performa

Kesimpulan