検索を軽くした

workspaces/app/src/pages/SearchPage/index.tsx

@@ -1,4 +1,5 @@
 import { Suspense, useCallback, useEffect, useId, useState } from 'react';
+import { useDebounce } from 'react-use';
 
 import { useBookList } from '../../features/book/hooks/useBookList';
 import { Box } from '../../foundation/components/Box';
@@ -16,6 +17,9 @@ const SearchPage: React.FC = () => {
   const [isClient, setIsClient] = useState(false);
   const [keyword, setKeyword] = useState('');
 
+  const [debouncedKeyword, setDebouncedKeyword] = useState(keyword);
+  useDebounce(() => setDebouncedKeyword(keyword), 500, [keyword]);
+
   const onChangedInput = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       setKeyword(event.target.value);
@@ -34,7 +38,7 @@ const SearchPage: React.FC = () => {
         <Text color={Color.MONO_100} id={searchResultsA11yId} typography={Typography.NORMAL20} weight="bold">
           検索結果
         </Text>
-        {keyword !== '' && <SearchResult books={books} keyword={keyword} />}
+        {debouncedKeyword !== '' && <SearchResult books={books} keyword={debouncedKeyword} />}
       </Box>
     </Box>
   );