Detail Info

React Hooks adalah fitur yang diperkenalkan di React 16.8 yang memungkinkan penggunaan state, lifecycle methods, dan fitur React lainnya di dalam function component. Berikut adalah daftar Hooks yang umum dan penjelasannya:

1. useState

Digunakan untuk menambahkan state lokal pada function component.

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

2. useEffect

Dipakai untuk efek samping (side effects), seperti fetch data, manipulasi DOM, dan timer.

useEffect(() => {
  console.log("Component mounted or updated");
}, [dependency]);

3. useContext

Digunakan untuk mengakses data dari React Context.

const value = useContext(MyContext);

4. useRef
Digunakan untuk menyimpan referensi ke elemen DOM atau nilai yang tidak menyebabkan re-render saat berubah.

const inputRef = useRef(null);

5. useMemo
Mengoptimalkan performa dengan memoizing hasil kalkulasi agar tidak dihitung ulang jika dependensinya tidak berubah.

const result = useMemo(() => computeExpensiveValue(a, b), [a, b]);

6. useCallback
Menghindari pembuatan ulang fungsi setiap render, cocok untuk mengoptimalkan komponen child yang menerima fungsi sebagai prop.

const handleClick = useCallback(() => {
  doSomething();
}, []);

7. useReducer
Alternatif dari useState untuk state management yang kompleks, mirip dengan Redux.

const [state, dispatch] = useReducer(reducer, initialState);

8. useLayoutEffect
Mirip dengan useEffect, tapi dijalankan sinkron setelah semua DOM selesai dimutakhirkan, cocok untuk layouting.

useLayoutEffect(() => {
  // DOM measurements
}, []);

9. useImperativeHandle
Digunakan bersama forwardRef untuk mengontrol nilai ref dari komponen anak secara manual.

useImperativeHandle(ref, () => ({
  focus: () => inputRef.current.focus()
}));

10. useDebugValue

Dipakai untuk memberikan label khusus saat debugging custom hook di React DevTools.

useDebugValue(value);