Panduan Lengkap React Hooks untuk Pemula

React Hooks telah mengubah cara kita menulis komponen React. Dengan Hooks, kita dapat menggunakan state dan fitur React lainnya tanpa menulis class component.

Apa itu React Hooks?

React Hooks adalah fungsi yang memungkinkan Anda "hook into" fitur React dari function components. Hooks memungkinkan Anda menggunakan state dan lifecycle methods tanpa menulis class.

Hook Dasar

useState

import React, { useState } from "react";

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Hook Lanjutan

useContext

Hook ini memungkinkan Anda mengonsumsi context tanpa nesting.

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee",
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222",
  },
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useReducer

Alternatif untuk useState yang lebih cocok untuk state logic yang kompleks.

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

Best Practices

1. Gunakan ESLint Plugin: Install eslint-plugin-react-hooks untuk membantu mengikuti rules of hooks.

2. Ekstrak Custom Hooks: Jika logic dapat digunakan kembali, buat custom hook.

3. Optimasi Performance: Gunakan useMemo dan useCallback untuk optimasi.

4. Dependency Array: Selalu perhatikan dependency array di useEffect.

Custom Hooks

Anda dapat membuat custom hooks untuk mengenkapsulasi logic yang dapat digunakan kembali:

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

// Penggunaan
function CounterComponent() {
  const { count, increment, decrement, reset } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

Kesimpulan

React Hooks memberikan cara yang lebih sederhana dan powerful untuk mengelola state dan side effects dalam function components. Dengan memahami hooks dasar dan lanjutan, Anda dapat membangun aplikasi React yang lebih bersih dan mudah dipelihara.

Mulailah dengan hooks dasar seperti useState dan useEffect, kemudian eksplorasi hooks lanjutan sesuai kebutuhan aplikasi Anda.