Dalam seri artikel ini, kami memulai perjalanan melalui bidang React hooks kustom, menemukan potensi besarnya untuk meningkatkan proyek pengembangan Anda. Fokus kita hari ini adalah pada hook "useTimeout", salah satu dari banyak hook yang dibuat dengan cermat yang tersedia dalam koleksi hook kustom React.
Github:https://github.com/sergeyleschev/react-custom-hooks
import { useCallback, useEffect, useRef } from "react"
export default function useTimeout(callback, delay) {
const callbackRef = useRef(callback)
const timeoutRef = useRef()
useEffect(() => {
callbackRef.current = callback
}, [callback])
const set = useCallback(() => {
timeoutRef.current = setTimeout(() => callbackRef.current(), delay)
}, [delay])
const clear = useCallback(() => {
timeoutRef.current && clearTimeout(timeoutRef.current)
}, [])
useEffect(() => {
set()
return clear
}, [delay, set, clear])
const reset = useCallback(() => {
clear()
set()
}, [clear, set])
return { reset, clear }
}
Hook "useTimeout" merangkum logika untuk menyetel, menghapus, dan menyetel ulang batas waktu dalam komponen React. Dibutuhkan dua parameter: fungsi panggilan balik dan durasi penundaan dalam milidetik. Setiap kali penundaan yang ditentukan berlalu, fungsi panggilan balik yang disediakan akan dijalankan.
Salah satu keuntungan signifikan dari kait khusus ini adalah memastikan fungsi panggilan balik tetap mutakhir meskipun berubah selama perenderan ulang komponen. Dengan menggunakan useRef untuk menyimpan referensi panggilan balik, hook menjamin bahwa versi terbaru dari fungsi tersebut selalu dipanggil.
Selain itu, hook "useTimeout" mengoptimalkan kinerja dengan memanfaatkan useCallback untuk memoize fungsi "set" dan "clear". Artinya, fungsi hanya dibuat ulang ketika dependensinya berubah, sehingga mencegah perenderan yang tidak perlu dan meningkatkan efisiensi.
mport { useState } from "react"
import useTimeout from "./useTimeout"
export default function TimeoutComponent() {
const [count, setCount] = useState(10)
const { clear, reset } = useTimeout(() => setCount(0), 1000)
return (
{count}
setCount(c => c + 1)}>IncrementClear TimeoutReset Timeout
) }
Kait "useTimeout" dapat digunakan dalam berbagai skenario yang memerlukan tindakan berwaktu. Misalnya, dalam komponen hitung mundur seperti "Komponen Timeout" yang ditampilkan di atas, Anda dapat dengan mudah menerapkan pengatur waktu yang disetel ulang setelah durasi tertentu. Dengan menggunakan kait "useTimeout", Anda dapat dengan mudah memperbarui nilai hitung mundur dan mengelola batas waktu tanpa mengkhawatirkan kode manajemen batas waktu yang rumit.
