/*! For license information please see edac15f8.f02acb4b.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[5094],{59615:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>u,default:()=>m,frontMatter:()=>r,metadata:()=>c,toc:()=>i});var o=n(85893),s=n(11151);const r={sidebar_position:3,title:"useTimeout",comment:!0,tags:["Reactjs","Custom Hook","useTimeout"]},u=void 0,c={id:"reactjs/custom-hook/use-timeout",title:"useTimeout",description:"",source:"@site/issues/reactjs/custom-hook/use-timeout.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-timeout",permalink:"/issues/reactjs/custom-hook/use-timeout",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-timeout.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useTimeout",permalink:"/issues/tags/use-timeout"}],version:"current",sidebarPosition:3,frontMatter:{sidebar_position:3,title:"useTimeout",comment:!0,tags:["Reactjs","Custom Hook","useTimeout"]},sidebar:"tutorialSidebar",previous:{title:"useToggle",permalink:"/issues/reactjs/custom-hook/use-toggle"},next:{title:"useFetch",permalink:"/issues/reactjs/custom-hook/use-fetch"}},a={},i=[];function l(e){const t={code:"code",pre:"pre",...(0,s.a)(),...e.components};return(0,o.jsx)(t.pre,{children:(0,o.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\nfunction TimeoutComponent() {\n  const [count, setCount] = useState(10);\n  const { clear, reset } = useTimeout(() => setCount(0), 2000);\n\n  return (\n    <div>\n      <div>Value: {count}</div>\n      <div>\n        <button onClick={() => setCount((c) => c + 1)}>Increment</button>\n      </div>\n\n      <div>\n        <button onClick={clear}>Clear Timeout</button>\n      </div>\n\n      <div>\n        <button onClick={reset}>Reset Timeout</button>\n      </div>\n    </div>\n  );\n}\n\n// Render App\nrender(<TimeoutComponent />);\n"})})}function m(e={}){const{wrapper:t}={...(0,s.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},75251:(e,t,n)=>{var o=n(67294),s=Symbol.for("react.element"),r=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,c=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,a={key:!0,ref:!0,__self:!0,__source:!0};function i(e,t,n){var o,r={},i=null,l=null;for(o in void 0!==n&&(i=""+n),void 0!==t.key&&(i=""+t.key),void 0!==t.ref&&(l=t.ref),t)u.call(t,o)&&!a.hasOwnProperty(o)&&(r[o]=t[o]);if(e&&e.defaultProps)for(o in t=e.defaultProps)void 0===r[o]&&(r[o]=t[o]);return{$$typeof:s,type:e,key:i,ref:l,props:r,_owner:c.current}}t.Fragment=r,t.jsx=i,t.jsxs=i},85893:(e,t,n)=>{e.exports=n(75251)},11151:(e,t,n)=>{n.d(t,{Z:()=>c,a:()=>u});var o=n(67294);const s={},r=o.createContext(s);function u(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function c(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:u(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]);