Memahami

React

Hooks

React pada dasarnya memiliki dua jenis komponen yang dapat dibuat yaitu komponen class dan komponen function. Fitur-fitur seperti state, lifecycle dan sebagainya hanya dapat diterapkan di komponen class dan tidak memungkinkan untuk diterapkan di komponen function. Namun semenjak React v16.8.0, komponen function dapat melakukan banyak hal yang dapat dilakukan oleh komponen class dengan bantuan Hooks.

Hooks adalah suatu function khusus yang dapat kita terapkan di dalam komponen function untuk mengakses beberapa fitur-fitur lain yang dimiliki oleh React. Jika di komponen class kita menggunakan beberapa method seperti componentDidMount dan lain sebagainya untuk mengakses lifecycle, di komponen function kita dapat menggunakan Hooks untuk mengakses lifecycle dari sebuah komponen. Untuk menerapkan local state di komponen juga kita perlu menggunakan Hooks. Hooks umumnya diawali dengan kata “use” pada nama function nya.

Ada beberapa Hooks yang disediakan oleh React secara bawaan, beberapa diantaranya yaitu:

• useState
• useEffect
• useRef
• useMemo
• useCallback
• useContext

Aturan Saat Menggunakan Hooks

Ada beberapa aturan yang wajib kita patuhi ketika menggunakan Hooks untuk menghindari hal-hal yang tidak diinginkan.

Hooks hanya dapat digunakan di dalam komponen function ataupun custom hooks yang kita buat sendiri. Kita tidak dapat menerapkan Hooks di dalam function secara umum ataupun komponen class.

Hooks hanya dapat digunakan secara top-level didalam komponen function. Maka dari itu Hooks tidak boleh berada di dalam conditional statement, loop statement, ataupun nested function. Dengan mematuhi aturan ini kamu memastikan kalau Hooks akan dipanggil di urutan yang sama setiap kali komponen di-render dan ini membuat React dapat mempertahankan state dari Hooks saat useState dan useEffect dipanggil.

import { useState } from 'react';

const Menu = ({ title }) => {
	// Hooks diterapkan secara top-level seperti ini
  const [theme, setTheme] = useState('light');

	if (true) {
		// Ini tidak boleh
		// Karena diterapkan di dalam conditional statement
		const [value1, setValue1] = useState("Tekken");
	}

  const toggleTheme = () => {
    setTheme(theme === 'dark' ? 'light' : 'dark');

		// Ini tidak boleh
		// Karena diterapkan di nested function
		const [value2, setValue2] = useState("Final Fantasy");

		while (true) {
			// Ini tidak boleh
			// Karena diterapkan di dalam loop statement
			const [value3, setValue3] = useState("Monster Hunter");
		}
  };

	**// Ini boleh, karena masih top-level.
	const [value4, setValue4] = useState("Fire Emblem");**

	if (!title) {
		return null
	}

	// Ini tidak boleh
	// Karena diterapkan di dalam conditional statement
	const [value5, setValue5] = useState("Persona");

  return (
    <div>
      <h1>{title}</h1>

      <button
        style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}
        type="button"
        onClick={toggleTheme}
      >
        Toggle Theme
      </button>
    </div>
  );
};

export default Menu;

Aturan diatas wajib dipatuhi karena React bergantung pada urutan Hooks yang dipanggil setiap saat komponen di-render.

Kesimpulan

Dengan memahami apa itu Hooks, Anda dapat menggunakan berbagai macam fitur esensial yang React sediakan langsung dari dalam komponen function. Selain itu, aturan penggunaan Hooks wajib diikuti untuk menghindari terjadinya bug-bug yang tidak diinginkan.