/*! For license information please see 2c5e46d5.ae4977cc.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[191],{63816:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>r,default:()=>d,frontMatter:()=>a,metadata:()=>u,toc:()=>i});var s=n(85893),o=n(11151);const a={sidebar_position:16,title:"useDelayedState",comment:!0,tags:["Reactjs","Custom Hook","useDelayedState"]},r=void 0,u={id:"reactjs/custom-hook/useDelayedState",title:"useDelayedState",description:"",source:"@site/issues/reactjs/custom-hook/useDelayedState.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/useDelayedState",permalink:"/issues/reactjs/custom-hook/useDelayedState",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/useDelayedState.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useDelayedState",permalink:"/issues/tags/use-delayed-state"}],version:"current",sidebarPosition:16,frontMatter:{sidebar_position:16,title:"useDelayedState",comment:!0,tags:["Reactjs","Custom Hook","useDelayedState"]},sidebar:"tutorialSidebar",previous:{title:"useMemoByObjectVariables",permalink:"/issues/reactjs/custom-hook/useMemoByObjectVariables"},next:{title:"useFadeEffect",permalink:"/issues/reactjs/custom-hook/useFadeEffect"}},c={},i=[];function l(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 emptyFunction = (...args) => {};\n\nconst useDelayedState = (initialValues) => {\n  const [value, setValue] = useState(initialValues);\n  const e = useRef(null);\n\n  useEffect(function () {\n    return function () {\n      return clearTimeout(e.current);\n    };\n  }, []);\n\n  const func = useCallback(function (a, c = 0, f = emptyFunction) {\n    clearTimeout(e.current);\n    e.current = null;\n\n    if (c === 0) {\n      setValue(a), f(a);\n    } else {\n      e.current = setTimeout(() => {\n        setValue(a), f(a);\n        e.current = null;\n      }, c);\n    }\n  }, []);\n\n  return [value, func];\n};\n\nconst App = () => {\n  const [v, setV] = useDelayedState(0);\n\n  return (\n    <div>\n      <button onClick={() => setV(v + 1, 1000)}>Click {v}</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)(l,{...e})}):l(e)}},75251:(e,t,n)=>{var s=n(67294),o=Symbol.for("react.element"),a=Symbol.for("react.fragment"),r=Object.prototype.hasOwnProperty,u=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function i(e,t,n){var s,a={},i=null,l=null;for(s in void 0!==n&&(i=""+n),void 0!==t.key&&(i=""+t.key),void 0!==t.ref&&(l=t.ref),t)r.call(t,s)&&!c.hasOwnProperty(s)&&(a[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===a[s]&&(a[s]=t[s]);return{$$typeof:o,type:e,key:i,ref:l,props:a,_owner:u.current}}t.Fragment=a,t.jsx=i,t.jsxs=i},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={},a=s.createContext(o);function r(e){const t=s.useContext(a);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(a.Provider,{value:t},e.children)}}}]);