"用 useEffect 反應去抖動"

Question

我正在嘗試使用 debounce 實現自動完成搜索，

下面是我使用 lodash 的 debounce 的嘗試，似乎 debounce 不起作用。

我在輸入時看到每個字符都在被搜索

   const [query, setQuery] = useState('')
   const _search = () => {
     console.log('query: ', query)
     // network search request
   }

   const search = _.debounce(_search, 300)

   useEffect(() => {
     search()
   }, [query])

   const handleChangeQuery = useCallback((query) => {
     setQuery(query)
   })

Answer 1

您可以使用去抖動（或在另一個組件中使用）創建自定義組件輸入，而無需庫

例如像這樣的一些：

import React, { useEffect, useState } from 'react';

const InputDebounce = () => {

    const [text, setText] = useState('');

    useEffect(() => {
        const timeoutId = setTimeout(() => {
            console.log(text)
            //some function here
        }, 500);

        return () => clearTimeout(timeoutId)
    }, [text])


    return <input type="text" onChange={(e) => setText(e.target.value)} />
};

export default InputDebounce;

將clearTimeOut定義為 useEffect 的 return insde 非常重要，這樣可以正常工作。