{"id":8254,"date":"2024-02-09T11:41:20","date_gmt":"2024-02-09T10:41:20","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=8254"},"modified":"2024-02-09T11:41:56","modified_gmt":"2024-02-09T10:41:56","slug":"react-debouncer-hook-without-deps","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-debouncer-hook-without-deps\/","title":{"rendered":"React debouncer hook (without deps)"},"content":{"rendered":"\n<div style=\"height: 250px; position:relative; margin-bottom: 50px;\" class=\"wp-block-simple-code-block-ace\"><pre class=\"wp-block-simple-code-block-ace\" style=\"position:absolute;top:0;right:0;bottom:0;left:0\" data-mode=\"tsx\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">export function useDebounce(callback: (...args: any[]) => any, delay: number) {\r\n    const timeoutRef = useRef&lt;any>(null);\r\n\r\n    useEffect(() => {\r\n        \/\/ Cleanup the previous timeout on re-render\r\n        return () => {\r\n            if (timeoutRef.current) {\r\n                clearTimeout(timeoutRef.current);\r\n            }\r\n        };\r\n    }, []);\r\n\r\n    const debouncedCallback = (...args: any[]) => {\r\n        if (timeoutRef.current) {\r\n            clearTimeout(timeoutRef.current);\r\n        }\r\n\r\n        timeoutRef.current = setTimeout(() => {\r\n            callback(...args);\r\n        }, delay);\r\n    };\r\n\r\n    return debouncedCallback;\r\n};\r\n\r\nfunction SearchBox(props: { onSearch: (searchText: string) => any }) {\r\n    const { onSearch } = props;\r\n\r\n    const debouncedSearch = useDebounce(onSearch, 500);\r\n    return &lt;Input.Search placeholder={translate(\"filter-search-placeholder\")} onChange={(e) => debouncedSearch(e.target.value)} onSearch={onSearch} \/>\r\n}\r\n\r\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8254","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=8254"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8254\/revisions"}],"predecessor-version":[{"id":8257,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/8254\/revisions\/8257"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=8254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=8254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=8254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}