この解答例はChatGPTによって生成されています,正しいかは自己判断で。
BFE.devでのAI解答例 - React コーディング問題
8. useDebounce()
以下は、useDebounceフックの実装例です。
import { useState, useEffect } from 'react'
function useDebounce(value: any, delay: number) {
const [debouncedValue, setDebouncedValue] = useState(value)
useEffect(() => {
const timeoutId = setTimeout(() => {
setDebouncedValue(value)
}, delay)
return () => {
clearTimeout(timeoutId)
}
}, [value, delay])
return debouncedValue
}
このフックは、value
が変更されるたびに、1秒のディレイをかけてdebouncedValue
を更新します。useEffect()
フックにより、前回の更新が完了してから次のタイマーをセットするようになっているため、値が更新されるたびにタイマーが再セットされます。そして、更新があった場合は、クリアされるタイマーがセットされ、ダブルクリックなどで早期に入力が終わった場合は、セットされたタイマーがクリアされます。