5 Custom React Hooks yang Gue Pake Terus buat Bikin Coding Lebih Gampang
RA
Rafly Aziz Abdillah
8 menit baca
5 Custom React Hooks yang Gue Pake Terus buat Bikin Coding Lebih Gampang
Waktu ngoding React, gue sering banget nemuin pattern yang sama berulang-ulang di setiap project. Daripada nulis logic yang sama terus-terusan, mending bikin custom hooks aja yang bisa dipake berkali-kali. Nah, ini dia 5 custom hooks favorit gue yang worth it banget buat dicoba!
1. useDebounce - Delay Execution dengan Elegan
Masalahnya Apa?
Pernah bikin fitur search dengan auto-complete? Setiap kali user ngetik, langsung trigger API call. Boros banget! Bayangin user ngetik "javascript" - itu udah 10 API calls cuma buat 10 huruf doang.
Kodenya
javascript
import { useState, useEffect } from 'react';
function useDebounce(value, delay = 500) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}
export default useDebounce;Cara Pake
javascript
function SearchBox() {
const [query, setQuery] = useState('');
const debouncedQuery = useDebounce(query, 500);
useEffect(() => {
if (debouncedQuery) {
fetch(`/api/search?q=${debouncedQuery}`)
.then(res => res.json())
.then(data => console.log(data));
}
}, [debouncedQuery]);
return <input value={query} onChange={e => setQuery(e.target.value)} />;
}Pro tip: Delay 300-500ms buat search, 1000-2000ms buat auto-save.
2. useLocalStorage - State yang Persist
Masalahnya Apa?
Nyimpen data ke localStorage itu ribet. Harus JSON.parse(), JSON.stringify(), plus handle error. Capek deh!
Kodenya
javascript
import { useState } from 'react';
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});
const setValue = (value) => {
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
};
return [storedValue, setValue];
}
export default useLocalStorage;Cara Pake
javascript
function ThemeToggle() {
const [theme, setTheme] = useLocalStorage('theme', 'light');
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Current Theme: {theme}
</button>
);
}Perfect buat nyimpen user preferences, theme, atau cart items!
3. useFetch - Data Fetching Made Easy
Masalahnya Apa?
Setiap fetch data harus bikin state loading, error, dan data. Bosen nulis berulang-ulang!
Kodenya
javascript
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const res = await fetch(url);
if (!res.ok) throw new Error('Fetch gagal');
setData(await res.json());
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, loading, error };
}
export default useFetch;Cara Pake
javascript
function UserList() {
const { data, loading, error } = useFetch('/api/users');
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{data.map(user => <li key={user.id}>{user.name}</li>)}
</ul>
);
}Bonus: Bisa dikembangin dengan abort controller buat cancel request!
4. useToggle - Simple Boolean State
Masalahnya Apa?
Nulis setState(prev => !prev) berkali-kali itu redundant banget.
Kodenya
javascript
import { useState, useCallback } from 'react';
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = useCallback(() => setValue(prev => !prev), []);
const setTrue = useCallback(() => setValue(true), []);
const setFalse = useCallback(() => setValue(false), []);
return [value, toggle, setTrue, setFalse];
}
export default useToggle;Cara Pake
javascript
function Modal() {
const [isOpen, toggle, open, close] = useToggle(false);
return (
<div>
<button onClick={open}>Buka Modal</button>
{isOpen && (
<div className="modal">
<p>Ini konten modal</p>
<button onClick={close}>Tutup</button>
</div>
)}
</div>
);
}Gampang kan? Tinggal panggil
toggle(),open(), atauclose().
5. useClickOutside - Detect Click Outside Element
Masalahnya Apa?
Nutup dropdown atau modal pas user klik di luar itu tricky. Harus manage event listener dengan benar.
Kodenya
javascript
import { useEffect, useRef } from 'react';
function useClickOutside(handler) {
const ref = useRef(null);
useEffect(() => {
const handleClick = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
handler();
}
};
document.addEventListener('mousedown', handleClick);
return () => document.removeEventListener('mousedown', handleClick);
}, [handler]);
return ref;
}
export default useClickOutside;Cara Pake
javascript
function Dropdown() {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useClickOutside(() => setIsOpen(false));
return (
<div ref={dropdownRef}>
<button onClick={() => setIsOpen(!isOpen)}>Menu</button>
{isOpen && (
<ul className="dropdown-menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
)}
</div>
);
}Essential buat dropdown, modal, dan sidebar!
Kesimpulan
Kelima custom hooks ini bener-bener ngebantu workflow coding sehari-hari:
- useDebounce → Delay input untuk optimasi API calls
- useLocalStorage → State yang persist di browser
- useFetch → Data fetching dengan loading & error state
- useToggle → Boolean state management yang clean
- useClickOutside → Detect klik di luar element
Kenapa Custom Hooks Itu Penting?
- Reusability - Logic yang sama, cukup tulis sekali
- Separation of Concerns - Logic terpisah dari UI
- Readability - Code lebih clean dan maintainable
- Testing - Lebih gampang di-test secara terpisah
Tips: Simpen semua hooks di folder
src/hooks/biar project-mu makin rapi!
Happy coding! 🚀
Komentar(0)