Tutorial React Hooks: Bagaiman Menggunakan Komponen JavaScript? Simak Yuk!

5 Oktober 2025

Tutorial React Hooks: Bagaiman Menggunakan Komponen JavaScript? Simak Yuk!

Dalam pengembangan web modern, React telah menjadi pustaka JavaScript yang paling berpengaruh. Salah satu inovasi terbesarnya adalah React Hooks, yang memperkenalkan cara revolusioner dalam membangun komponen dengan fungsi murni. Tutorial React Hooks ini akan memandu Anda memahami konsep, implementasi, dan praktik terbaik dalam menggunakan React Hooks untuk komponen JavaScript.

Pengenalan React Hooks

React Hooks adalah fitur terbaru di React yang diperkenalkan pada versi 16.8 yang memungkinkan Anda menggunakan state dan fitur-fitur lifecycle lainnya dalam function components. Sebelum adanya React Hooks, pengembang harus menggunakan class component untuk mengelola state dan lifecycle, yang seringkali menyebabkan kode yang rumit dan sulit dipelihara.

Dengan React Hooks, Anda bisa memecah logika komponen menjadi fungsi-fungsi yang lebih kecil dan reusable. Hal ini membuat kode Anda menjadi lebih modular, mudah diuji, dan mudah dipahami. Hooks merupakan fungsi khusus yang memungkinkan kita untuk "mengaitkan" (hook into) state dan fitur-fitur lifecycle React dari dalam function component.

Memahami React Hooks dan Peran Utamanya

Sebelum React Hooks diperkenalkan, komponen React dengan state dan lifecycle method harus ditulis sebagai class. Namun, class components memiliki kompleksitas tersendiri seperti binding this yang membingungkan bagi banyak pengembang, terutama pemula.

Dengan hadirnya React Hooks, kita dapat menulis ulang komponen-komponen ini menjadi function component yang lebih sederhana dan mudah dibaca. Hooks membantu kita membawa fitur-fitur yang sebelumnya hanya bisa digunakan di kelas, ke dalam dunia functional programming.

Kenapa Harus Menggunakan Hooks di React

Sederhana dan Mudah Dibaca: Hooks membuat kode komponen menjadi lebih ringkas dan mudah dipahami, terutama untuk developer yang baru mengenal React .
Reusable: Hooks dapat diekstrak menjadi custom Hooks, sehingga kita dapat membagikan logika yang sama di berbagai komponen .
Lebih Baik untuk State Management: Hooks seperti useState memberikan cara yang lebih baik untuk mengelola state dibandingkan dengan this.setState di kelas .
Tidak Memaksa Penggunaan Kelas: Kita dapat membangun aplikasi React yang kompleks tanpa harus selalu menggunakan kelas .
Meningkatkan Modularitas dan Komposabilitas: Dengan custom hooks, logika dapat dipecah menjadi fungsi-fungsi kecil yang dapat dikomposisi untuk membangun perilaku yang lebih kompleks .

Konsep Functional Programming dalam React Hooks

React Hooks tidak hanya sekadar fitur sintaksis, tetapi merepresentasikan pergeseran paradigma menuju functional programming dalam pengembangan React. Memahami konsep ini akan membantu Anda menggunakan React Hooks dengan lebih efektif.

Prinsip Functional Programming dalam React

Functional programming menekankan pada penggunaan pure functions dan immutable data. Pendekatan ini menghasilkan kode yang lebih mudah diprediksi, diuji, dan lebih deklaratif .

Beberapa prinsip kunci functional programming yang diadopsi oleh React Hooks meliputi:

Immutability: Data tidak diubah langsung, melainkan dibuat salinan dengan perubahan yang diperlukan .
Pure Functions: Fungsi yang diberikan input yang sama selalu menghasilkan output yang sama tanpa efek samping .
First-Class dan Higher-Order Functions: Memperlakukan fungsi sebagai nilai yang dapat diteruskan sebagai argumen, dikembalikan dari fungsi lain, dan ditetapkan ke variabel .
Komposisi: Membangun fungsi kompleks dengan menggabungkan fungsi-fungsi sederhana .

Cara React Hooks Menerapkan Functional Programming

React mengadopsi prinsip functional programming melalui beberapa mekanisme:

Data yang Immutable

Dalam React, immutability adalah konsep fundamental. Hook seperti useState dan useReducer mendorong pembaruan state yang immutable. Alih-alih memodifikasi array atau objek secara langsung, kita membuat array atau objek baru dengan elemen yang diperbarui .

const [items, setItems] = useState([]);

// Memperbarui state secara immutable
const addItem = (newItem) => setItems([...items, newItem]);

Immutability membuat aliran data dapat diprediksi dan memfasilitasi kemampuan React untuk melakukan render ulang yang efisien .

Pure Functions

Komponen fungsional React pada dasarnya adalah pure function—mereka menerima props sebagai input dan mengembalikan JSX sebagai output tanpa mengubah state eksternal. Ini membuatnya dapat diprediksi dan mudah diuji .

Closures dan State

React Hooks memanfaatkan JavaScript closures, yang penting dalam functional programming, untuk mengenkapsulasi state dalam komponen fungsional. Closures memungkinkan hooks mengingat nilai di seluruh render ulang tanpa memerlukan struktur penyimpanan eksternal .

Jenis-jenis React Hooks yang Perlu Diketahui

React Hooks menawarkan beragam jenis hook yang masing-masing memiliki fungsi dan kegunaan spesifik. Dengan memahami jenis-jenis hook yang tersedia, kita dapat memilih hook yang paling sesuai untuk menyelesaikan masalah yang kita hadapi dalam pengembangan aplikasi React.

Daftar React Hooks Utama

React menyediakan sejumlah Hooks bawaan yang sangat berguna untuk mengelola berbagai aspek dari komponen kita. Berikut adalah daftar React Hooks yang paling sering digunakan:

1. useState

Hook useState adalah fondasi dari pengelolaan state di dalam komponen fungsional. Dengan useState, kita dapat menyimpan nilai-nilai yang dapat berubah seiring waktu dan mengakses nilai tersebut di dalam komponen .

import React, { useState } from 'react';

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

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

Fungsi useState mengembalikan array yang terdiri dari dua elemen: nilai state saat ini dan fungsi untuk memperbarui state tersebut. Dalam contoh di atas, count adalah nilai state, dan setCount adalah fungsi untuk memperbaruinya .

2. useEffect

Hook useEffect memungkinkan kita untuk menjalankan efek samping setelah render. Efek samping adalah hal-hal yang terjadi di luar React render, seperti fetching data, mengatur subscription, atau melakukan manipulasi DOM secara langsung .

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

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

  // Sama seperti componentDidMount dan componentDidUpdate:
  useEffect(() => {
    // Memperbarui judul dokumen menggunakan API browser
    document.title = `Anda klik sebanyak ${count} kali`;
  });

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

useEffect mirip dengan componentDidMount, componentDidUpdate, dan componentWillUnmount dalam class component, tetapi dengan sintaks yang lebih sederhana dan fleksibel .

3. useContext

Hook useContext digunakan untuk membagikan data di seluruh aplikasi tanpa harus meneruskan props secara berlapis-lapis. Dengan useContext, kita dapat membuat sebuah context yang berisi data yang ingin kita bagikan, lalu menggunakan Hook useContext di komponen-komponen yang membutuhkan data tersebut .

import React, { useContext } from 'react';

// Buat context
const ThemeContext = React.createContext('light');

function ThemedComponent() {
  const theme = useContext(ThemeContext); // Akses nilai context

  return <div>Tema saat ini adalah {theme}</div>;
}

4. useReducer

Hook useReducer adalah alternatif dari useState untuk mengelola state yang lebih kompleks. Jika state kita melibatkan banyak perubahan yang saling terkait, useReducer dapat memberikan pendekatan yang lebih terstruktur .

import React, { useReducer } from 'react';

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increase</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrease</button>
    </div>
  );
}

5. useRef

Hook useRef menciptakan referensi mutable yang tidak menyebabkan render ulang. Umumnya digunakan untuk mengakses elemen DOM atau menyimpan nilai antara render .

import React, { useRef } from 'react';

function FocusInput() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Fokus Input</button>
    </div>
  );
}

6. useMemo dan useCallback

Untuk optimalisasi performa, useMemo menyimpan hasil komputasi mahal dan useCallback menyimpan referensi fungsi agar tidak berubah setiap render .

import React, { useMemo, useCallback } from 'react';

function ExpensiveComponent({ a, b }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  
  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]);

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

Langkah-langkah Penggunaan React Hooks dalam Aplikasi

Setelah memahami konsep dasar React Hooks, langkah selanjutnya adalah menerapkannya dalam proyek nyata. Pada bagian ini, kita akan membahas langkah-langkah konkret dalam mengimplementasikan Hooks ke dalam komponen React Anda.

Penggunaan React Hooks untuk Mengelola State dan Effect

Dalam tutorial React JS, salah satu fitur React yang paling penting adalah penggunaan Hooks seperti useState dan useEffect. useState memungkinkan kita untuk mengelola state dalam komponen fungsional dengan mudah.

Contohnya, Anda bisa menggunakan state hook ini untuk mengubah nilai state secara dinamis di laman aplikasi. Fungsi useState mengembalikan array yang terdiri dari nilai state saat ini dan fungsi untuk memperbarui state tersebut, dikenal juga dengan istilah setState.

Untuk membahas efek samping atau side effect, kita menggunakan useEffect, dimana kita bisa menjalankan fungsi setelah render selesai. Bagian-bagian yang perlu diperhatikan adalah bagaimana Hooks membantu kita dalam berinteraksi dengan lifecycle komponen dan menggunakannya untuk melakukan tindakan seperti menghapus listener setelah selesai.

Cara Mengintegrasikan Hooks dengan Komponen JavaScript

Dalam mengintegrasikan React Hooks ke komponen JavaScript, penting untuk membahas cara menjalankan fungsi dari useState dan useEffect secara efisien.

Langkah pertama adalah membuat panduan tentang bagaimana menggunakan hooks ini berdampingan dengan kode JavaScript yang sudah ada. Dengan React Hooks, kita bisa menambahkan state dan side effect ke dalam komponen JavaScript tanpa menggunakan class.

Sangat direkomendasikan penggunaan Hooks karena Hooks membuat kode lebih simple dan modular. Dengan fitur ini, kita dapat mengubah nilai state secara dinamis dan responsif terhadap perubahan pada komponen.

Penerapan React Hooks pada Aplikasi Sederhana

Mari kita lihat contoh penerapan React Hooks dalam aplikasi point of sales (POS) sederhana. Dalam aplikasi POS, kita dapat menggunakan useState untuk mengelola keranjang belanja dan useEffect untuk mengambil data produk dari API .

Mengelola Keranjang Belanja dengan useState

Berikut adalah contoh implementasi keranjang belanja menggunakan useState:

import React, { useState } from "react";

const ProductList = () => {
  const [cart, setCart] = useState([]);
  
  const products = [
    { id: 1, name: "Product A", price: 100 },
    { id: 2, name: "Product B", price: 200 },
    { id: 3, name: "Product C", price: 300 },
  ];

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  return (
    <div>
      <h3>Daftar Produk</h3>
      {products.map((product) => (
        <div key={product.id}>
          <p>{product.name}</p>
          <p>Harga: {product.price}</p>
          <button onClick={() => addToCart(product)}>Tambah ke Keranjang</button>
        </div>
      ))}

      <h3>Keranjang</h3>
      {cart.length > 0 ? (
        cart.map((item, index) => (
          <div key={index}>
            <p>{item.name}</p>
            <p>Harga: {item.price}</p>
          </div>
        ))
      ) : (
        <p>Keranjang kosong</p>
      )}
    </div>
  );
};

export default ProductList;

Mengambil Data Produk dengan useEffect

Berikut adalah contoh penggunaan useEffect untuk mengambil data produk dari API:

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

const ProductList = () => {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    // Simulasi pengambilan data dari API
    const fetchProducts = async () => {
      // Dalam aplikasi nyata, ini akan menjadi API endpoint
      const mockProducts = [
        { id: 1, name: "Product A", price: 100 },
        { id: 2, name: "Product B", price: 200 },
        { id: 3, name: "Product C", price: 300 },
      ];
      
      setProducts(mockProducts);
    };

    fetchProducts();
  }, []); // Array dependensi kosong berarti efek ini hanya dijalankan sekali setelah render pertama

  return (
    <div>
      <h3>Daftar Produk</h3>
      {products.map((product) => (
        <div key={product.id}>
          <p>{product.name}</p>
          <p>Harga: {product.price}</p>
        </div>
      ))}
    </div>
  );
};

export default ProductList;

Membuat Custom Hooks untuk Logika yang Dapat Digunakan Kembali

Salah satu keunggulan utama React Hooks adalah kemampuan untuk membuat custom hooks. Custom hooks memungkinkan kita mengekstrak logika komponen into fungsi yang dapat digunakan kembali di berbagai komponen .

Custom Hook Sederhana: useWindowWidth

Mari kita buat custom hook untuk melacak lebar jendela (window width). Buat file useWindowWidth.js di folder src/hooks:

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener("resize", handleResize);

    // cleanup saat component di-unmount
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

Penjelasan:

Hook useWindowWidth menyimpan state width.
Saat ukuran jendela berubah, state diperbarui.
Hook mengembalikan nilai width agar bisa dipakai di component lain .

Sekarang mari kita gunakan custom hook useWindowWidth di dalam component App:

import useWindowWidth from "./hooks/useWindowWidth";

function App() {
  const width = useWindowWidth();

  return (
    <div>
      <h1>Lebar Jendela: {width}px</h1>
    </div>
  );
}

export default App;

Custom Hook untuk Form: useForm

Custom hook juga bisa mengelola logika form agar tidak ditulis berulang. Buat file useForm.js di folder src/hooks:

import { useState } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const resetForm = () => {
    setValues(initialValues);
  };

  return { values, handleChange, resetForm };
}

export default useForm;

Menggunakan hook ini di App.jsx:

import useForm from "./hooks/useForm";

function App() {
  const { values, handleChange, resetForm } = useForm({
    email: "",
    password: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Email: ${values.email}, Password: ${values.password}`);
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

export default App;

Penjelasan:

useForm menyimpan state untuk input form.
handleChange mengupdate nilai form sesuai input.
resetForm mengembalikan nilai ke kondisi awal .

Aturan dan Praktik Terbaik Penggunaan React Hooks

Untuk menjaga stabilitas dan prediktabilitas komponen, React menetapkan aturan utama dalam penggunaan React Hooks. Memahami aturan ini sangat penting untuk menghindari bug dan perilaku tidak terduga.

Aturan Penggunaan React Hooks

Panggil Hooks hanya di tingkat atas Jangan memanggil Hooks di dalam loop, kondisi, atau fungsi bersarang. Hal ini memastikan bahwa Hooks dipanggil dalam urutan yang sama setiap kali komponen di-render .
Panggil Hooks hanya di dalam komponen fungsi atau custom hook Jangan panggil dari fungsi JavaScript biasa .

Gunakan plugin ESLint seperti eslint-plugin-react-hooks untuk membantu menegakkan aturan ini.

Praktik Terbaik Penggunaan React Hooks

Pisahkan Logika Berdasarkan Fungsionalitas Gunakan lebih dari satu useEffect untuk memisahkan efek yang tidak saling terkait .
Modularisasi dengan Custom Hooks Jika satu komponen mengandung banyak logika, ekstrak ke dalam custom hook agar tetap bersih .
Manajemen State Asinkron Gunakan fungsi updater seperti setCount(prev => prev + 1) untuk menghindari kondisi race .
Optimisasi Performa Gunakan useMemo dan useCallback untuk menghindari render ulang yang tidak perlu pada komponen anak .
Perhatikan Dependency Array Pastikan semua variabel yang digunakan di dalam useEffect tercantum dalam array dependensi .

Manfaat Penggunaan React Hooks pada Aplikasi Modern

React Hooks telah merevolusi cara kita membangun komponen React. Dengan fitur-fitur yang kuat dan sintaks yang lebih sederhana, Hooks menawarkan sejumlah keuntungan signifikan dibandingkan dengan class components .

Kode yang Lebih Ringkas dan Mudah Dibaca: Hooks memungkinkan kita untuk menulis komponen dengan lebih sedikit boilerplate code. Ini membuat kode lebih mudah dipahami dan dipelihara, terutama untuk proyek yang kompleks .
Pengelolaan State yang Lebih Intuitif: useState memberikan cara yang lebih sederhana dan intuitif untuk mengelola state lokal dalam komponen fungsional. Tidak perlu lagi memikirkan this.state dan this.setState .
Pengelolaan Side Effects yang Lebih Fleksibel: useEffect memberikan cara yang lebih fleksibel untuk menangani side effects seperti fetching data, mengatur subscription, atau melakukan manipulasi DOM .
Reusabilitas Kode yang Lebih Tinggi: Custom Hooks memungkinkan kita untuk mengekstrak logika yang sering digunakan menjadi fungsi yang dapat digunakan kembali di berbagai komponen .
Adopsi Konsep Functional Programming: Hooks mendorong kita untuk berpikir dalam paradigma functional programming, yang sering dianggap lebih mudah dipahami dan diuji .

Kesimpulan

Dalam kesimpulannya, React Hooks telah merevolusi cara kita membangun komponen di React. Dengan fleksibilitas dan kemudahan penggunaannya, Hooks memungkinkan kita menciptakan komponen yang lebih terstruktur, reusable, dan mudah dipelihara. Dari dasar-dasar useState dan useEffect hingga pembuatan custom hooks yang canggih, React Hooks memberikan alat yang powerful untuk membangun aplikasi React modern. Dengan memahami konsep functional programming yang mendasarinya, Anda dapat menulis kode yang lebih bersih, lebih dapat diprediksi, dan lebih mudah diuji.

Penguasaan React Hooks adalah keterampilan esensial bagi pengembang React modern. Dengan mempraktikkan konsep-konsep yang dijelaskan dalam tutorial ini, Anda akan dapat membangun aplikasi yang lebih efisien dan mudah dipelihara.

Apakah Anda ingin menguasai React Hooks dan teknologi modern lainnya untuk berkarir di bidang pengembangan web? Bergabunglah dengan Kelas Fullstack di Codepolitan! Kelas online ini dirancang untuk:

Membekali Anda dengan keterampilan pengembangan web dari A hingga Z
Memenuhi kebutuhan industri akan developer yang kompeten
Meningkatkan potensi gaji dan karir Anda
Memberikan kemampuan untuk membuat website dan aplikasi untuk mengembangkan bisnis online sendiri

Dapatkan pengalaman belajar langsung dari para praktisi industri yang berpengalaman. Jangan lewatkan kesempatan untuk menjadi developer yang dicari industri!

Referensi:

Tags:

#ReactHooks #javascript #KelasFullstack

What do you think?

Reactions

Baca Artikel Lainnya

Learning

RuangAI

KelasFullstack

JagoanSiber