{"id":5158,"date":"2021-07-12T07:47:25","date_gmt":"2021-07-12T06:47:25","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=5158"},"modified":"2023-03-15T14:40:19","modified_gmt":"2023-03-15T13:40:19","slug":"react-throttle-debounce","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/react-throttle-debounce\/","title":{"rendered":"React Throttle-Debounce usage"},"content":{"rendered":"\n<p>From: <a href=\"https:\/\/aldaviva.com\/portfolio.html#ratelimiting\">https:\/\/aldaviva.com\/portfolio.html#ratelimiting<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"773\" src=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2023\/03\/afbeelding.png\" alt=\"\" class=\"wp-image-7534\" srcset=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2023\/03\/afbeelding.png 1000w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2023\/03\/afbeelding-300x232.png 300w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2023\/03\/afbeelding-768x594.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\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=\"typescript\" data-theme=\"monokai\" data-fontsize=\"14\" data-lines=\"Infinity\" data-showlines=\"true\" data-copy=\"false\">\/* eslint-disable react-hooks\/exhaustive-deps *\/\nimport { Form, Input } from \"antd\";\nimport Search from \"antd\/lib\/input\/Search\";\nimport React, { ChangeEvent, useCallback, useEffect, useRef, useState } from \"react\";\nimport { debounce, throttle } from \"throttle-debounce\";\nimport { translate } from \"..\/..\/..\/domain\/wiring\/AppDomain\";\n\nexport function SearchInput(props: { searchText: string; onSearch: (searchText: string) => any }) {\n    const { searchText, onSearch } = props;\n\n    const [typedSearchText, setTypedSearchText] = useState&lt;string>(searchText);\n\n    const doSearch = (value: string) => {\n        setTypedSearchText(value);\n        onSearch(value);\n    };\n\n    const throttledSearch = useCallback(throttle(4000, doSearch), []);\n    const debouncedSearch = useCallback(debounce(2000, doSearch), []);\n\n    const updateSearchText = (e: ChangeEvent&lt;HTMLInputElement>) => {\n        setTypedSearchText(e.target.value);\n        debouncedSearch(e.target.value);\n    };\n\n    const inputRef = useRef&lt;Input>() as React.MutableRefObject&lt;Input>;\n\n    useEffect(() => {\n        if (inputRef?.current) { setTimeout(() => inputRef.current.input.focus(), 100); }\n    }, []);\n\n    return &lt;Form name=\"basic\" initialValues={{ remember: true }}>\n        &lt;Form.Item\n            label={translate(\"general.search\")}\n            name=\"search\">\n            &lt;Search ref={inputRef} placeholder={translate(\"general.search\")} value={typedSearchText} onChange={updateSearchText} allowClear onSearch={throttledSearch} enterButton autoFocus \/>\n        &lt;\/Form.Item>\n    &lt;\/Form>;\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"<p>From: https:\/\/aldaviva.com\/portfolio.html#ratelimiting<\/p>\n","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-5158","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5158","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=5158"}],"version-history":[{"count":5,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5158\/revisions"}],"predecessor-version":[{"id":7535,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/5158\/revisions\/7535"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=5158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=5158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=5158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}