Tutorial React JS #8: Mengenal dan Menggunakan React Hooks

Mengenal dan menggunakan react hooks

Pada seri tutorial belajar React JS ini, kita akan membahas tentang React Hooks dan bagaimana mengimplementasikannya pada aplikasi ReactJS. Selain itu, akan dibahas juga tentang keuntungan dan manfaat penggunaan React Hooks pada aplikasi.

React Hooks adalah fitur pada ReactJS yang memungkinkan developer menggunakan state dan fitur React lainnya pada komponen fungsional. Sebelumnya, penggunaan state hanya dapat dilakukan pada komponen class. Dengan adanya React Hooks, penggunaan state pada komponen fungsional menjadi lebih mudah dan efisien.

Menggunakan useState hook

useState adalah salah satu hook yang digunakan untuk menambahkan state pada komponen fungsional. Dengan useState, kita dapat membuat variabel state dan mengubahnya dengan fungsi setState.

Contoh penggunaan useState:

import React, { useState } from 'react';

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

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

Dalam contoh di atas, kita membuat variabel count dengan nilai awal 0 dan fungsi setCount untuk mengubah nilainya. Ketika button diklik, nilai count akan bertambah 1.

Menggunakan useEffect hook

useEffect digunakan untuk menjalankan fungsi pada komponen saat mounting atau saat komponen diupdate. Dalam useEffect, kita dapat menambahkan dependency array untuk mengontrol kapan useEffect dijalankan.

Contoh penggunaan useEffect:

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

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

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

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

Dalam contoh di atas, kita menjalankan function yang mengubah judul dokumen setiap kali nilai count berubah. Dependency array [count] digunakan untuk mengontrol kapan function dijalankan.

Menggunakan useContext hook

useContext digunakan untuk membagikan data antar komponen dalam aplikasi. Dengan useContext, kita dapat membuat konteks dan mengakses konteks tersebut pada komponen lain.

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

const MyContext = React.createContext();

function Parent() {
  const [message, setMessage] = useState('Hello from parent');

  return (
    <MyContext.Provider value={{ message, setMessage }}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const { message, setMessage } = useContext(MyContext);

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage('Hello from child')}>
        Change message
      </button>
    </div>
  );
}

Dalam contoh di atas, kita membuat context MyContext dan mengaksesnya pada komponen Child dengan useContext. Pada komponen Parent, kita membuat variabel message dan function setMessage untuk mengubah nilai message. Nilai tersebut kemudian diberikan ke komponen Child melalui Provider. Pada komponen Child, nilai message diambil dari konteks dan ditampilkan di dalam paragraf. Ketika button di klik, nilai message akan diubah melalui function setMessage.

Menggunakan useReducer hook

useReducer digunakan untuk mengelola state kompleks dalam aplikasi. Dengan useReducer, kita dapat mengubah state dengan melakukan action tertentu pada state tersebut.

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 (
    <>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>
        Increment
      </button>
      <button onClick={() => dispatch({ type: 'decrement' })}>
        Decrement
      </button>
    </>
  );
}

Dalam contoh di atas, kita membuat function reducer untuk mengubah state dengan melakukan aksi tertentu. Pada komponen Counter, kita menggunakan useReducer untuk membuat variabel state dan function dispatch untuk mengubah nilai state. Ketika button di klik, function dispatch akan memanggil fungsi reducer dengan parameter aksi yang diambil dari button yang diklik.

Menggunakan useCallback hook

useCallback digunakan untuk mengoptimalkan performa aplikasi dengan menghindari rendering ulang yang tidak perlu pada komponen.

Contoh penggunaan useCallback:

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

function Button({ onClick, children }) {
  const handleClick = useCallback(() => {
    onClick(children);
  }, [onClick, children]);

  return (
    <button onClick={handleClick}>
      {children}
    </button>
  );
}

function App() {
  const [message, setMessage] = useState('');

  const handleClick = useCallback((text) => {
    setMessage(`Hello ${text}`);
  }, []);

  return (
    <>
      <Button onClick={handleClick}>World</Button>
      <p>{message}</p>
    </>
  );
}

Dalam contoh di atas, kita membuat komponen Button dengan prop onClick. Pada komponen Button, kita menggunakan useCallback untuk membuat variabel handleClick yang diambil dari prop onClick dan children. Pada komponen App, kita membuat variabel message dan fungsi setMessage untuk menampilkan pesan. Ketika button pada komponen Button di klik, fungsi handleClick akan dipanggil dan nilai message akan diubah menjadi ‘Hello World’.

Contoh penggunaan React Hooks pada aplikasi ReactJS

Sebagai contoh penggunaan React Hooks pada aplikasi ReactJS, kita akan membuat aplikasi sederhana yang dapat menampilkan daftar item dan menghitung jumlah item yang dipilih. Kita akan menggunakan useState, useEffect, useContext, useReducer, dan useCallback pada aplikasi tersebut.

Pertama-tama, mari kita definisikan beberapa item dan menampilkannya dalam sebuah array:

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
];

Selanjutnya, mari kita buat sebuah komponen React bernama “ItemList” yang akan menampilkan daftar item dan menghitung jumlah item yang dipilih:

import React, { useState, useEffect, useContext, useReducer, useCallback } from 'react';

// definisikan items di sini
const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
];

// definisikan context untuk selected items
const SelectedItemsContext = React.createContext();

// definisikan reducer untuk mengubah state selected items
const selectedItemsReducer = (state, action) => {
  switch (action.type) {
    case 'add':
      return [...state, action.payload];
    case 'remove':
      return state.filter(item => item.id !== action.payload.id);
    default:
      throw new Error();
  }
};

const ItemList = () => {
  const [selectedItems, dispatch] = useReducer(selectedItemsReducer, []);
  const [totalSelected, setTotalSelected] = useState(0);

  // gunakan useEffect untuk memperbarui totalSelected setiap kali selectedItems berubah
  useEffect(() => {
    setTotalSelected(selectedItems.length);
  }, [selectedItems]);

  // gunakan useCallback untuk mencegah Item komponen yang tidak perlu di-render ulang setiap kali selectedItems berubah
  const handleItemClick = useCallback(
    item => {
      if (selectedItems.some(selectedItem => selectedItem.id === item.id)) {
        dispatch({ type: 'remove', payload: item });
      } else {
        dispatch({ type: 'add', payload: item });
      }
    },
    [selectedItems]
  );

  return (
    <div>
      <SelectedItemsContext.Provider value={selectedItems}>
        <p>Total Selected: {totalSelected}</p>
        <ul>
          {items.map(item => (
            <Item key={item.id} item={item} onItemClick={handleItemClick} />
          ))}
        </ul>
      </SelectedItemsContext.Provider>
    </div>
  );
};

const Item = ({ item, onItemClick }) => {
  const selectedItems = useContext(SelectedItemsContext);

  // gunakan useEffect untuk memperbarui daftar item yang dipilih setiap kali selectedItems berubah
  useEffect(() => {
    console.log('Selected Items:', selectedItems);
  }, [selectedItems]);

  return (
    <li onClick={() => onItemClick(item)}>
      {item.name} {selectedItems.some(selectedItem => selectedItem.id === item.id) ? '(Selected)' : ''}
    </li>
  );
};

export default ItemList;

Pada kode di atas, pertama-tama kita mendefinisikan sebuah array “items” yang akan ditampilkan dalam sebuah daftar.

Kemudian, kita membuat sebuah context “SelectedItemsContext” yang akan digunakan untuk menyimpan state daftar item yang dipilih. Selanjutnya, kita mendefinisikan sebuah reducer “selectedItemsReducer” yang akan digunakan untuk mengubah state daftar item yang dipilih.

Setelahnya kita membuat sebuah komponen “ItemList” yang menggunakan hook “useReducer” untuk menyimpan state daftar item yang dipilih. Komponen ini juga menggunakan hook “useState” untuk menyimpan state jumlah item yang dipilih.

Untuk mengupdate state jumlah item yang dipilih setiap kali daftar item yang dipilih berubah, kita menggunakan hook “useEffect”. Kita juga menggunakan hook “useCallback” untuk mencegah item komponen yang tidak perlu di-render ulang setiap kali daftar item yang dipilih berubah.

Komponen “ItemList” menggunakan provider “SelectedItemsContext” untuk membagikan state daftar item yang dipilih ke bawah ke komponen-komponen di dalamnya. Komponen “ItemList” juga menampilkan jumlah item yang dipilih dan daftar item menggunakan “map” untuk menampilkan komponen “Item” untuk setiap item.

Komponen “Item” menggunakan hook “useContext” untuk mengambil state daftar item yang dipilih dari context “SelectedItemsContext”. Komponen ini juga menggunakan hook “useEffect” untuk menampilkan daftar item yang dipilih pada console setiap kali state daftar item yang dipilih berubah. Komponen “Item” menampilkan item dan menunjukkan apakah item tersebut dipilih atau tidak.

Dengan menggunakan beberapa hooks React seperti useState, useEffect, useContext, useReducer, dan useCallback, kita dapat membuat aplikasi sederhana yang dapat menampilkan daftar item dan menghitung jumlah item yang dipilih dengan mudah.

Tinggalkan Komentar

Your email address will not be published. Required fields are marked *