Apa Itu React Hooks? Fungsi dan Contoh Penggunaan

React Hooks adalah fitur pada React yang memungkinkan developer menggunakan state dan lifecycle tanpa harus membuat class component. Dengan Hooks, penulisan kode menjadi lebih sederhana, rapi, dan mudah dipelajari oleh pemula maupun developer berpengalaman.

Sejak diperkenalkan pada React 16.8, Hooks menjadi salah satu cara utama dalam membangun aplikasi React modern. Beberapa Hooks yang paling sering digunakan adalah useState, useEffect, useContext, dan useRef untuk mengelola data serta interaksi dalam aplikasi.

Lalu, apa sebenarnya React Hooks, apa saja fungsinya, dan bagaimana cara menggunakannya dalam project? Yuk, simak penjelasan lengkap beserta contoh penggunaan React Hooks berikut ini!

Apa Itu React Hooks?

React Hooks adalah fitur dalam React yang memungkinkan developer menggunakan state, lifecycle, dan berbagai fitur React lainnya tanpa perlu membuat class component. 

Sebelum Hooks diperkenalkan, pengelolaan state umumnya dilakukan menggunakan class component yang cenderung lebih kompleks dan menghasilkan kode yang lebih panjang. 

Dengan Hooks, developer dapat menulis kode yang lebih sederhana, mudah dibaca, serta lebih mudah digunakan kembali melalui custom Hooks. 

Saat ini, React Hooks telah menjadi standar dalam pengembangan aplikasi React modern karena membantu meningkatkan produktivitas dan mempermudah pengelolaan logika aplikasi.

Baca juga: Panduan Memilih Bootcamp Full Stack Developer yang Tepat

Fungsi React Hooks

React Hooks memiliki berbagai fungsi yang membantu developer membangun aplikasi React dengan lebih efisien dan terstruktur. 

Berikut beberapa fungsi utama React Hooks yang paling sering digunakan dalam pengembangan aplikasi modern.

1. Mengelola State Komponen

React Hooks memungkinkan developer menyimpan dan mengelola data di dalam komponen menggunakan useState. 

Data tersebut dapat berubah sesuai interaksi pengguna, seperti klik tombol, mengisi form, atau memilih menu. Dengan pendekatan ini, pengelolaan state menjadi lebih sederhana dibandingkan menggunakan class component.

2. Menjalankan Efek Samping (Side Effects)

Hook useEffect digunakan untuk menjalankan proses tertentu setelah komponen dirender. 

Contohnya adalah mengambil data dari API, memperbarui judul halaman, atau memasang event listener. Hook ini membantu memastikan proses tersebut berjalan pada waktu yang tepat sesuai kebutuhan aplikasi.

3. Berbagi Data Antar Komponen

React Hooks dapat digunakan bersama useContext untuk mengirim dan mengakses data dari berbagai komponen tanpa harus meneruskan props secara berulang. 

Cara ini membuat struktur kode lebih bersih dan mudah dikelola. Penggunaan context juga sangat membantu pada aplikasi yang memiliki banyak komponen bertingkat.

4. Mengoptimalkan Performa Aplikasi

Beberapa Hooks seperti useMemo dan useCallback membantu mengurangi proses render yang tidak diperlukan. 

Hook ini menyimpan hasil perhitungan atau fungsi sehingga tidak dibuat ulang setiap kali komponen dirender. Dengan demikian, performa aplikasi dapat tetap optimal terutama pada aplikasi berskala besar.

Baca juga: Rekomendasi Kursus Full Stack Developer: Manfaat & Benefit

Jenis-Jenis React Hooks

Sumber: Desain oleh Dibimbing

React Hooks dapat dibagi menjadi beberapa jenis sesuai fungsi utamanya. Mulai dari Hooks dasar untuk kebutuhan umum, Hooks tambahan untuk state yang lebih kompleks, hingga Hooks optimasi performa.

1. Hook Dasar (Basic Hooks)

Hook dasar digunakan untuk kebutuhan utama dalam komponen React, seperti mengelola state, menjalankan efek samping, dan mengakses data global.

1. useState: Digunakan untuk menambahkan dan mengelola state lokal pada functional component. Hook ini memungkinkan data berubah secara dinamis dan akan memicu render ulang ketika nilainya diperbarui.
2. useEffect: Digunakan untuk menangani side effects seperti mengambil data dari API atau memasang event listener. Hook ini dapat dijalankan saat komponen dimuat maupun ketika data tertentu berubah.
3. useContext: Digunakan untuk mengakses data dari Context API tanpa perlu meneruskan props ke banyak komponen. Penggunaannya membantu membuat kode lebih bersih dan mudah dikelola.

2. Hook State Tambahan (Additional Hooks)

Ketika aplikasi memiliki logika yang lebih kompleks, React menyediakan Hooks tambahan untuk membantu pengelolaan state dan referensi data.

1. useReducer: Merupakan alternatif useState untuk mengelola state yang memiliki banyak perubahan. Hook ini membuat logika perubahan state lebih terstruktur dan mudah dipelihara.
2. useRef: Digunakan untuk menyimpan nilai referensi yang dapat berubah tanpa memicu render ulang komponen. Hook ini juga sering digunakan untuk mengakses elemen DOM secara langsung.

3. Hook Optimasi Performa

Hook optimasi performa membantu meningkatkan efisiensi aplikasi dengan mengurangi proses render atau komputasi yang tidak diperlukan.

1. useMemo: Digunakan untuk menyimpan hasil perhitungan yang kompleks agar tidak dihitung ulang setiap render. Hook ini membantu mengurangi beban pemrosesan pada aplikasi.
2. useCallback: Digunakan untuk menyimpan fungsi callback agar tidak dibuat ulang pada setiap render. Penggunaannya dapat membantu mengoptimalkan performa child component.

Baca juga: Panduan Belajar Full Stack Developer dengan Mudah

Contoh React Hooks

Setelah memahami pengertian dan jenis-jenis React Hooks, kamu juga perlu mengetahui contoh penggunaannya dalam kode. 

Berikut beberapa contoh React Hooks yang paling sering digunakan dalam pengembangan aplikasi React.

1. Contoh useState

Sumber: Desain oleh Dibimbing

useState digunakan untuk menyimpan dan mengubah data lokal di dalam komponen. Contohnya, Hook ini bisa digunakan untuk membuat tombol counter sederhana.

import React, { useState } from 'react';

function TombolCounter() {

 const [angka, setAngka] = useState(0);

 return (

  <div>

   <p>Anda menekan sebanyak {angka} kali</p>

   <button onClick={() => setAngka(angka + 1)}>

    Tekan Saya

   </button>

  </div>

 );

}

export default TombolCounter;

2. Contoh useEffect

Sumber: Desain oleh Dibimbing

useEffect digunakan untuk menjalankan side effects, seperti memperbarui judul halaman, mengambil data dari API, atau memasang event listener. 

Pada contoh berikut, judul halaman browser akan berubah ketika nilai state judul diperbarui.

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

function InfoJudul() {

 const [judul, setJudul] = useState('Beranda');

useEffect(() => {

  document.title = judul;

 }, [judul]);

 return (

  <div>

   <p>Judul saat ini: {judul}</p>

   <button onClick={() => setJudul('Tentang Kami')}>

    Ubah Judul

   </button>

  </div>

 );

}

export default InfoJudul;

3. Contoh useRef

Sumber: Desain oleh Dibimbing

useRef digunakan untuk menyimpan referensi yang dapat berubah tanpa memicu render ulang komponen. 

Hook ini juga sering dipakai untuk mengakses elemen DOM secara langsung, misalnya memberikan fokus otomatis pada input.

import React, { useRef } from 'react';

function FokusInput() {

 const inputEl = useRef(null);

 const arahkanFokus = () => {

  inputEl.current.focus();

 };

 return (

  <div>

   <input ref={inputEl} type="text" />

   <button onClick={arahkanFokus}>

    Fokuskan Input

   </button>

  </div>

 );

}

export default FokusInput;

Baca juga: Full Stack Developer Career Path: Level, Skill, dan Gaji

Kapan React Hooks Digunakan?

React Hooks sebaiknya digunakan sesuai kebutuhan komponen dalam aplikasi. Berikut ini adalah beberapa kondisi ketika React Hooks cocok digunakan.

1. Saat Mengelola State

React Hooks dapat digunakan ketika komponen perlu menyimpan data yang dapat berubah selama aplikasi berjalan. 

Contohnya adalah data input form, jumlah klik tombol, atau status login pengguna. Dalam kondisi ini, useState menjadi Hook yang paling sering digunakan.

2. Saat Menjalankan Side Effects

Beberapa proses perlu dijalankan setelah komponen dirender ke halaman. Misalnya mengambil data dari API, memperbarui judul halaman, atau memasang event listener. Untuk kebutuhan tersebut, developer biasanya menggunakan useEffect.

3. Saat Berbagi Data

React Hooks cocok digunakan ketika banyak komponen membutuhkan data yang sama. Dengan memanfaatkan useContext, data dapat diakses tanpa harus meneruskan props melalui banyak level komponen. Cara ini membuat struktur kode menjadi lebih bersih dan mudah dipelihara.

4. Saat Optimasi Performa

Pada aplikasi yang lebih kompleks, performa menjadi aspek yang perlu diperhatikan. Hooks seperti useMemo dan useCallback dapat membantu mengurangi render atau perhitungan yang tidak diperlukan. Hasilnya, aplikasi dapat berjalan lebih efisien dan responsif.

Ingin Menjadi Full Stack Web Developer?

Setelah memahami React Hooks, kini saatnya meningkatkan kemampuanmu dalam membangun aplikasi web modern secara lebih profesional. 

Menguasai React hanyalah salah satu langkah penting untuk menjadi Full Stack Web Developer yang siap bekerja di industri teknologi.

Yuk, ikuti Bootcamp Full Stack Web Development di Dibimbing! Di sini, kamu akan belajar frontend dan backend development mulai dari HTML, CSS, JavaScript, React, Node.js, Express.js, MongoDB, hingga membangun proyek web end-to-end yang sesuai kebutuhan industri.

Dibimbing juga telah dipercaya oleh 1.100+ hiring partner dan memiliki tingkat keberhasilan alumni hingga 96% dalam mendapatkan peluang karier yang lebih baik di bidang teknologi.

Jadi, tunggu apa lagi? Konsultasikan kebutuhan belajarmu sekarang Disini dan bergabung bersama Bootcamp Full Stack Web Development di Dibimbing. Mulai perjalananmu menjadi Full Stack Web Developer profesional bersama #BimbingSampeJadi!