/*! For license information please see d81956c4.55764207.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[4029],{97247:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>c,contentTitle:()=>u,default:()=>p,frontMatter:()=>r,metadata:()=>i,toc:()=>a});var n=s(85893),o=s(11151);const r={sidebar_position:13,title:"usePrevious",comment:!0,tags:["Reactjs","Custom Hook","usePrevious"]},u=void 0,i={id:"reactjs/custom-hook/use-previous",title:"usePrevious",description:"",source:"@site/issues/reactjs/custom-hook/use-previous.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-previous",permalink:"/issues/reactjs/custom-hook/use-previous",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-previous.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"usePrevious",permalink:"/issues/tags/use-previous"}],version:"current",sidebarPosition:13,frontMatter:{sidebar_position:13,title:"usePrevious",comment:!0,tags:["Reactjs","Custom Hook","usePrevious"]},sidebar:"tutorialSidebar",previous:{title:"useDeepEffect",permalink:"/issues/reactjs/custom-hook/use-deep-effect"},next:{title:"useMergeRefs",permalink:"/issues/reactjs/custom-hook/use-merge-ref"}},c={},a=[];function l(e){const t={code:"code",pre:"pre",...(0,o.a)(),...e.components};return(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const usePrevious = (value) => {\n  const refCurrent = useRef(value);\n  const refPrevious = useRef();\n\n  if (refCurrent.current !== value) {\n    refPrevious.current = refCurrent.current;\n    refCurrent.current = value;\n  }\n\n  return refPrevious.current;\n};\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n  const [name, setName] = useState('Kyle');\n  const previousCount = usePrevious(count);\n\n  return (\n    <>\n      <div>\n        {count} - {previousCount}\n      </div>\n      <div>{name}</div>\n\n      <button onClick={() => setCount((currentCount) => currentCount + 1)}>Increment</button>\n      <button onClick={() => setName('Join')}>Change name</button>\n    </>\n  );\n};\n\nrender(<App />);\n"})})}function p(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(l,{...e})}):l(e)}},75251:(e,t,s)=>{var n=s(67294),o=Symbol.for("react.element"),r=Symbol.for("react.fragment"),u=Object.prototype.hasOwnProperty,i=n.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function a(e,t,s){var n,r={},a=null,l=null;for(n in void 0!==s&&(a=""+s),void 0!==t.key&&(a=""+t.key),void 0!==t.ref&&(l=t.ref),t)u.call(t,n)&&!c.hasOwnProperty(n)&&(r[n]=t[n]);if(e&&e.defaultProps)for(n in t=e.defaultProps)void 0===r[n]&&(r[n]=t[n]);return{$$typeof:o,type:e,key:a,ref:l,props:r,_owner:i.current}}t.Fragment=r,t.jsx=a,t.jsxs=a},85893:(e,t,s)=>{e.exports=s(75251)},11151:(e,t,s)=>{s.d(t,{Z:()=>i,a:()=>u});var n=s(67294);const o={},r=n.createContext(o);function u(e){const t=n.useContext(r);return n.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function i(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:u(e.components),n.createElement(r.Provider,{value:t},e.children)}}}]);