Pengenalan React Hooks
React Hooks diperkenalkan di React 16.8 dan mengubah cara kita menulis komponen React. Dengan hooks, kita bisa menggunakan state dan lifecycle features tanpa menulis class component.
useState Hook
useState adalah hook yang memungkinkan kita menambahkan state ke functional component.
const [count, setCount] = useState(0);useEffect Hook
useEffect digunakan untuk melakukan side effects dalam functional component, seperti fetching data, subscriptions, atau mengubah DOM secara manual.
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);Rules of Hooks
- Hanya panggil hooks di level teratas
- Hanya panggil hooks dari React functions
Contoh Kode
Contoh useState dan useEffect
JavaScript
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');
// Effect untuk update document title
useEffect(() => {
document.title = `Click count: ${count}`;
}, [count]);
// Effect untuk fetch data (dengan cleanup)
useEffect(() => {
const controller = new AbortController();
fetch('/api/user', { signal: controller.signal })
.then(res => res.json())
.then(data => setName(data.name));
// Cleanup function
return () => controller.abort();
}, []);
return (
<div>
<p>Hi, {name}! You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}