React Hooks: Konsep Dasar yang Wajib Diketahui Developer

React adalah salah satu pustaka JavaScript paling populer yang digunakan untuk membangun antarmuka pengguna dinamis dan responsif. Seiring berkembangnya React, muncul berbagai fitur dan konsep baru yang memudahkan pengembang untuk menulis kode yang lebih bersih dan efisien. Salah satu fitur penting yang diperkenalkan dalam React versi 16.8 adalah React Hooks. React Hooks memungkinkan pengembang untuk menggunakan fitur-fitur state dan efek samping dalam komponen fungsional tanpa perlu menulis komponen berbasis kelas. Dengan kata lain, React Hooks membuat kode React lebih modular dan lebih mudah dipahami.

Dalam artikel ini, kita akan membahas secara mendalam tentang konsep dasar React Hooks yang wajib diketahui oleh setiap pengembang React. Kita akan membahas berbagai jenis hooks yang tersedia, cara penggunaannya, serta bagaimana hooks dapat membantu pengembang membangun aplikasi React yang lebih efisien dan terorganisir.

Baca juga: Meningkatkan Stabilitas Koneksi Jaringan di Tempat Kerja

Apa Itu React Hooks?

Sebelum memahami lebih jauh tentang React Hooks, kita perlu mengetahui mengapa hooks diperkenalkan. Sebelumnya, pengelolaan state dan efek samping dalam React hanya bisa dilakukan pada komponen berbasis kelas. Meskipun kelas memberikan fungsionalitas yang lengkap, kode yang dihasilkan cenderung lebih panjang, sulit dipahami, dan tidak fleksibel.

Untuk mengatasi masalah ini, React memperkenalkan Hooks — sebuah cara baru untuk mengelola state dan efek samping dalam komponen fungsional. Hooks memungkinkan pengembang untuk menggunakan state, konteks, dan efek samping tanpa perlu menulis komponen berbasis kelas. Dengan hooks, kode menjadi lebih singkat, mudah dikelola, dan lebih mudah untuk diuji.

Jenis-Jenis React Hooks yang Perlu Diketahui

Dalam React, ada berbagai jenis hooks yang bisa digunakan untuk menyelesaikan berbagai masalah yang sering ditemui saat membangun aplikasi. Berikut adalah beberapa jenis React Hooks yang paling sering digunakan dan wajib diketahui oleh pengembang React.

1. useState

useState adalah hook pertama yang wajib dikuasai oleh setiap pengembang React. Hook ini digunakan untuk menambahkan state dalam komponen fungsional. Dengan useState, kita bisa mendeklarasikan dan memperbarui nilai state dalam komponen fungsional dengan cara yang sangat sederhana.

Contoh Penggunaan 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)}>Klik saya</button>

    </div>

  );

}

Pada contoh di atas, useState(0) mendeklarasikan sebuah state count dengan nilai awal 0. Fungsi setCount digunakan untuk memperbarui nilai state count.

2. useEffect

useEffect adalah hook yang digunakan untuk menangani efek samping dalam komponen fungsional. Efek samping bisa berupa operasi seperti fetch data dari API, pembaruan DOM, atau pengaturan langganan ke layanan eksternal. useEffect memungkinkan kita untuk menangani efek samping tersebut dengan cara yang lebih deklaratif dan mudah dipahami.

Contoh Penggunaan useEffect

import React, { useState, useEffect } from ‘react’;

function DataFetcher() {

  const [data, setData] = useState(null);

  useEffect(() => {

    fetch(‘https://api.example.com/data’)

      .then(response => response.json())

      .then(data => setData(data));

  }, []); // [] membuat efek hanya dipanggil sekali saat komponen dipasang

  return (

    <div>

      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : <p>Loading…</p>}

    </div>

  );

}

Pada contoh di atas, useEffect digunakan untuk melakukan fetch data dari API saat komponen pertama kali dipasang ke DOM. Efek ini hanya dipanggil sekali karena kita memberikan array kosong [] sebagai dependensi.

3. useContext

useContext adalah hook yang memungkinkan kita untuk mengakses nilai dari Context di dalam komponen fungsional. Context sering digunakan untuk berbagi data antara komponen tanpa perlu melewatkannya melalui props secara berulang-ulang. Dengan useContext, kita bisa mengakses dan memanipulasi nilai context dengan cara yang lebih efisien.

Contoh Penggunaan useContext

import React, { useContext } from ‘react’;

// Membuat context

const ThemeContext = React.createContext(‘light’);

function ThemedComponent() {

  const theme = useContext(ThemeContext);

  return <div style={{ background: theme === ‘dark’ ? ‘black’ : ‘white’ }}>This is a {theme} theme!</div>;

}

function App() {

  return (

    <ThemeContext.Provider value=”dark”>

      <ThemedComponent />

    </ThemeContext.Provider>

  );

}

Pada contoh di atas, useContext digunakan untuk mengakses nilai dari ThemeContext di dalam komponen ThemedComponent.

4. useReducer

useReducer adalah alternatif untuk useState yang berguna ketika kita harus menangani logika state yang lebih kompleks. useReducer memungkinkan kita untuk mengelola state dengan cara yang mirip dengan penggunaan reducer pada Redux, namun lebih sederhana dan langsung digunakan di dalam komponen fungsional.

Contoh Penggunaan useReducer

import React, { useReducer } from ‘react’;

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 (

    <div>

      <p>Count: {state.count}</p>

      <button onClick={() => dispatch({ type: ‘increment’ })}>Increment</button>

      <button onClick={() => dispatch({ type: ‘decrement’ })}>Decrement</button>

    </div>

  );

}

Pada contoh di atas, useReducer digunakan untuk menangani state yang lebih kompleks dan memisahkan logika pembaruan state dalam bentuk reducer yang jelas dan terstruktur.

5. useRef

useRef adalah hook yang memungkinkan kita untuk menyimpan referensi ke elemen DOM atau nilai yang persisten tanpa menyebabkan re-render pada komponen. useRef sering digunakan untuk mengakses elemen DOM secara langsung atau untuk menyimpan nilai yang tidak terkait dengan render komponen.

Contoh Penggunaan useRef

import React, { useRef } from ‘react’;

function FocusInput() {

  const inputRef = useRef();

  const focusInput = () => {

    inputRef.current.focus();

  };

  return (

    <div>

      <input ref={inputRef} type=”text” />

      <button onClick={focusInput}>Focus Input</button>

    </div>

  );

}

Pada contoh di atas, useRef digunakan untuk mendapatkan referensi ke elemen input dan memfokuskan elemen tersebut ketika tombol diklik.

Manfaat Menggunakan React Hooks

1. Menyederhanakan Komponen Dengan menggunakan hooks, kita dapat menulis komponen yang lebih ringkas dan mudah dipahami, tanpa perlu menulis kode berbasis kelas yang lebih kompleks.
   
2. Mengurangi Boilerplate Hooks mengurangi kebutuhan untuk menulis kode boilerplate, seperti constructor, componentDidMount, dan metode lainnya yang umum ditemukan dalam komponen berbasis kelas.
   
3. Meningkatkan Reusabilitas Kode Hooks memungkinkan kita untuk membuat logika yang dapat digunakan kembali dalam komponen fungsional, sehingga mengurangi duplikasi kode dan meningkatkan modularitas aplikasi.
   
4. Meningkatkan Pembacaan dan Pemeliharaan Kode Dengan hooks, kode menjadi lebih deklaratif dan mudah dibaca. Ini membuat pemeliharaan kode lebih mudah karena pengembang dapat dengan cepat memahami alur aplikasi.
   

Baca juga: Langkah-Langkah Membangun Pipeline Continuous Integration

Kesimpulan

React Hooks telah menjadi salah satu fitur terpenting dalam pengembangan aplikasi React. Dengan hooks, pengembang dapat menangani state, efek samping, konteks, dan logika lainnya dengan cara yang lebih bersih dan efisien. Beberapa hooks dasar yang harus diketahui oleh pengembang adalah useState, useEffect, useContext, useReducer, dan useRef. Penggunaan hooks memungkinkan pembuatan komponen yang lebih modular, mengurangi kode boilerplate, dan meningkatkan reusabilitas kode.

Temukan Lowongan Pekerjaan Di MSBU!