React Hooks dalam ReactJS

   April 04, 2025       Mahatma Mahardhika

---

React Hooks dalam ReactJS

Table of Contents

• Pengertian React Hooks
• Kenapa Menggunakan Hooks?
• Hooks Bawaan React
• Menggunakan useState
• Menggunakan useEffect
• Custom Hooks
• Kesimpulan

---

Pengertian React Hooks

React Hooks adalah fitur yang diperkenalkan di React 16.8 yang memungkinkan penggunaan state dan lifecycle methods dalam Functional Component tanpa memerlukan Class Component.

---

Kenapa Menggunakan Hooks?

• Menghilangkan kompleksitas Class Component: Tidak perlu lagi menggunakan constructor atau binding.
• Kode lebih bersih dan mudah dibaca: Hooks membuat kode lebih terstruktur.
• Dapat digunakan kembali: Hooks memungkinkan pembuatan custom hooks untuk logika yang dapat digunakan kembali.

---

Hooks Bawaan React

React menyediakan beberapa hooks bawaan yang sering digunakan:

• useState – Mengelola state dalam functional component.
• useEffect – Menjalankan efek samping seperti fetching data.
• useContext – Mengakses state global dengan Context API.
• useReducer – Alternatif useState untuk state yang lebih kompleks.

---

Menggunakan useState

useState digunakan untuk mengelola state dalam Functional Component.

import React, { useState } from "react";

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

  return (
    

      
Nilai: {count}
      
    
  );
};

---

Menggunakan useEffect

useEffect digunakan untuk menangani efek samping dalam komponen.

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

const Timer = () => {
  const [time, setTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return 
Waktu: {time}
;
};

---

Custom Hooks

Custom Hooks memungkinkan kita membuat logika yang dapat digunakan kembali.

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data));
  }, [url]);
  return data;
};

---

Kesimpulan

React Hooks membuat pengelolaan state dan efek samping dalam Functional Component lebih mudah dan efisien. Dengan memahami useState, useEffect, dan Custom Hooks, pengembang dapat membangun aplikasi yang lebih modular dan terstruktur.