/*! For license information please see 08dc15d5.2e611ec2.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[7347],{94117:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>r,default:()=>d,frontMatter:()=>c,metadata:()=>u,toc:()=>l});var s=n(85893),o=n(11151);const c={sidebar_position:11,title:"useDebounce",comment:!0,tags:["Reactjs","Custom Hook","useDebounce"]},r=void 0,u={id:"reactjs/custom-hook/use-debounce",title:"useDebounce",description:"",source:"@site/issues/reactjs/custom-hook/use-debounce.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-debounce",permalink:"/issues/reactjs/custom-hook/use-debounce",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-debounce.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useDebounce",permalink:"/issues/tags/use-debounce"}],version:"current",sidebarPosition:11,frontMatter:{sidebar_position:11,title:"useDebounce",comment:!0,tags:["Reactjs","Custom Hook","useDebounce"]},sidebar:"tutorialSidebar",previous:{title:"useGeolocation",permalink:"/issues/reactjs/custom-hook/use-geolocation"},next:{title:"useDeepEffect",permalink:"/issues/reactjs/custom-hook/use-deep-effect"}},a={},l=[];function i(e){const t={code:"code",pre:"pre",...(0,o.a)(),...e.components};return(0,s.jsx)(t.pre,{children:(0,s.jsx)(t.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const useTimeout = (callback, delay) => {\n  const refCallback = useRef();\n  const refTimeout = useRef();\n\n  useEffect(() => {\n    refCallback.current = callback;\n  }, [callback]);\n\n  const set = useCallback(() => {\n    refTimeout.current = setTimeout(() => refCallback.current(), delay);\n  }, [delay]);\n\n  const clear = useCallback(() => {\n    refTimeout.current && clearTimeout(refTimeout.current);\n  }, []);\n\n  useEffect(() => {\n    set();\n    return clear;\n  }, [delay, set, clear]);\n\n  const reset = useCallback(() => {\n    clear();\n    set();\n  }, [set, clear]);\n\n  return { clear, reset };\n};\n\nconst useDebounce = (callback, delay, dependencies) => {\n  const { reset, clear } = useTimeout(callback, delay);\n  useEffect(reset, [...dependencies, reset]);\n  useEffect(clear, []);\n};\n\nconst App = () => {\n  const [count, setCount] = useState(10);\n  useDebounce(() => alert(count), 1000, [count]);\n\n  return (\n    <div>\n      <div>Value: {`${count}`}</div>\n      <button onClick={() => setCount((c) => c + 1)}>Increment</button>\n    </div>\n  );\n};\n\nrender(<App />);\n"})})}function d(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(i,{...e})}):i(e)}},75251:(e,t,n)=>{var s=n(67294),o=Symbol.for("react.element"),c=Symbol.for("react.fragment"),r=Object.prototype.hasOwnProperty,u=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function l(e,t,n){var s,c={},l=null,i=null;for(s in void 0!==n&&(l=""+n),void 0!==t.key&&(l=""+t.key),void 0!==t.ref&&(i=t.ref),t)r.call(t,s)&&!a.hasOwnProperty(s)&&(c[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===c[s]&&(c[s]=t[s]);return{$$typeof:o,type:e,key:l,ref:i,props:c,_owner:u.current}}t.Fragment=c,t.jsx=l,t.jsxs=l},85893:(e,t,n)=>{e.exports=n(75251)},11151:(e,t,n)=>{n.d(t,{Z:()=>u,a:()=>r});var s=n(67294);const o={},c=s.createContext(o);function r(e){const t=s.useContext(c);return s.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function u(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),s.createElement(c.Provider,{value:t},e.children)}}}]);