Posted at

React hooks でインクリメンタルサーチやオートコンプリートでのdebounceをお手軽にする

よくあるインクリメンタルサーチやオートコンプリートとかで、入力されたクエリに応じてリクエストを飛ばす時に、お手軽にdebounceするためのhooks。

import * as React from 'react';

// 自分で定義するのがめんどい人は react-use の useDebounce 使うとよろし
function useDebounce(fn: () => any, ms: number = 0, args: any[] = []) {
React.useEffect(() => {
const handle = setTimeout(fn.bind(null, args), ms);

return () => {
clearTimeout(handle);
};
}, args);
};

export default function useDebouncedQuery(onChange: (query: string) => void) {
const [searchQuery, setSearchQuery] = React.useState('');

useDebounce(
() => {
onChange(searchQuery);
},
400,
[searchQuery]
);

const clearQuery = React.useCallback(() => {
setSearchQuery('');
}, []);

return { searchQuery, setSearchQuery, clearQuery };
}

使う側例

function Hoge() {

const loadSuggestions = (query: string) => { ... }

const { searchQuery, setSearchQuery } = useDebouncedQuery(loadSuggestions);

return (
<Input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
)
}