/*! For license information please see 4bcb1526.7f7ae894.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[569],{69557:(e,t,s)=>{s.r(t),s.d(t,{assets:()=>i,contentTitle:()=>a,default:()=>p,frontMatter:()=>r,metadata:()=>u,toc:()=>c});var o=s(85893),n=s(11151);const r={sidebar_position:1,title:"useStateProxy",comment:!0,tags:["Reactjs","Custom Hook","useStateProxy"]},a=void 0,u={id:"reactjs/custom-hook/use-state-proxy",title:"useStateProxy",description:"This is a custom hook to mutate state in reactjs",source:"@site/issues/reactjs/custom-hook/use-state-proxy.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-state-proxy",permalink:"/issues/reactjs/custom-hook/use-state-proxy",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-state-proxy.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useStateProxy",permalink:"/issues/tags/use-state-proxy"}],version:"current",sidebarPosition:1,frontMatter:{sidebar_position:1,title:"useStateProxy",comment:!0,tags:["Reactjs","Custom Hook","useStateProxy"]},sidebar:"tutorialSidebar",previous:{title:"Sleep Sort",permalink:"/issues/javascripts/sort/sleep-sort"},next:{title:"useToggle",permalink:"/issues/reactjs/custom-hook/use-toggle"}},i={},c=[];function l(e){const t={code:"code",p:"p",pre:"pre",...(0,n.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.p,{children:"This is a custom hook to mutate state in reactjs"}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-jsx",metastring:"live noInline",live:!0,children:"const useStateProxy = (initialValues) => {\n  const [, setTime] = useState({});\n\n  return useMemo(() => {\n    return new Proxy(initialValues, {\n      set: (obj, prop, value) => {\n        obj[prop] = value;\n        setTime({});\n\n        return true;\n      },\n    });\n  }, []);\n};\n\nfunction App() {\n  const state = useStateProxy({ count: 0 });\n\n  return (\n    <div>\n      <h1>{state.count}</h1>\n\n      <button\n        onClick={() => {\n          state.count += 1;\n        }}\n      >\n        Click\n      </button>\n    </div>\n  );\n}\n\n// Render App\nrender(<App />);\n"})})]})}function p(e={}){const{wrapper:t}={...(0,n.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}},75251:(e,t,s)=>{var o=s(67294),n=Symbol.for("react.element"),r=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,u=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,s){var o,r={},c=null,l=null;for(o in void 0!==s&&(c=""+s),void 0!==t.key&&(c=""+t.key),void 0!==t.ref&&(l=t.ref),t)a.call(t,o)&&!i.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:n,type:e,key:c,ref:l,props:r,_owner:u.current}}t.Fragment=r,t.jsx=c,t.jsxs=c},85893:(e,t,s)=>{e.exports=s(75251)},11151:(e,t,s)=>{s.d(t,{Z:()=>u,a:()=>a});var o=s(67294);const n={},r=o.createContext(n);function a(e){const t=o.useContext(r);return o.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(n):e.components||n:a(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]);