/*! For license information please see 2625e9bf.46fdef24.js.LICENSE.txt */
"use strict";(self.webpackChunkweb_totals=self.webpackChunkweb_totals||[]).push([[5542],{18079:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>a,contentTitle:()=>c,default:()=>l,frontMatter:()=>r,metadata:()=>u,toc:()=>i});var s=n(85893),o=n(11151);const r={sidebar_position:12,title:"useDeepEffect",comment:!0,tags:["Reactjs","Custom Hook","useDeepEffect"]},c=void 0,u={id:"reactjs/custom-hook/use-deep-effect",title:"useDeepEffect",description:"",source:"@site/issues/reactjs/custom-hook/use-deep-effect.md",sourceDirName:"reactjs/custom-hook",slug:"/reactjs/custom-hook/use-deep-effect",permalink:"/issues/reactjs/custom-hook/use-deep-effect",draft:!1,unlisted:!1,editUrl:"https://github.com/hunghg255/web-totals/tree/main/issues/reactjs/custom-hook/use-deep-effect.md",tags:[{label:"Reactjs",permalink:"/issues/tags/reactjs"},{label:"Custom Hook",permalink:"/issues/tags/custom-hook"},{label:"useDeepEffect",permalink:"/issues/tags/use-deep-effect"}],version:"current",sidebarPosition:12,frontMatter:{sidebar_position:12,title:"useDeepEffect",comment:!0,tags:["Reactjs","Custom Hook","useDeepEffect"]},sidebar:"tutorialSidebar",previous:{title:"useDebounce",permalink:"/issues/reactjs/custom-hook/use-debounce"},next:{title:"usePrevious",permalink:"/issues/reactjs/custom-hook/use-previous"}},a={},i=[];function f(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:"function deepCompareEquals(a, b) {\n  // return isEqual(a, b); // lodash func\n  return JSON.stringify(a) === JSON.stringify(b);\n}\n\nfunction useDeepCompareMemoize(value) {\n  const ref = useRef();\n\n  if (!deepCompareEquals(value, ref.current)) {\n    ref.current = value;\n  }\n\n  return ref.current;\n}\n\nconst useDeepEffect = (callback, dependencies) => {\n  useEffect(callback, dependencies.map(useDeepCompareMemoize));\n};\n\nconst App = () => {\n  const [obj, setObj] = useState({ a: 1 });\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    // Check inspect console tab\n    console.log('useEffect');\n  }, [obj]);\n\n  useDeepEffect(() => {\n    // Check inspect console tab\n    console.log('useDeepEffect');\n  }, [obj]);\n\n  return (\n    <div>\n      <div>{JSON.stringify(obj)}</div>\n      <div>Count: {count}</div>\n      <button\n        onClick={() => {\n          setCount(count + 1);\n          setObj({ a: 1 });\n        }}\n      >\n        Click\n      </button>\n    </div>\n  );\n};\n\nrender(<App />);\n"})})}function l(e={}){const{wrapper:t}={...(0,o.a)(),...e.components};return t?(0,s.jsx)(t,{...e,children:(0,s.jsx)(f,{...e})}):f(e)}},75251:(e,t,n)=>{var s=n(67294),o=Symbol.for("react.element"),r=Symbol.for("react.fragment"),c=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 i(e,t,n){var s,r={},i=null,f=null;for(s in void 0!==n&&(i=""+n),void 0!==t.key&&(i=""+t.key),void 0!==t.ref&&(f=t.ref),t)c.call(t,s)&&!a.hasOwnProperty(s)&&(r[s]=t[s]);if(e&&e.defaultProps)for(s in t=e.defaultProps)void 0===r[s]&&(r[s]=t[s]);return{$$typeof:o,type:e,key:i,ref:f,props:r,_owner:u.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:()=>u,a:()=>c});var s=n(67294);const o={},r=s.createContext(o);function c(e){const t=s.useContext(r);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:c(e.components),s.createElement(r.Provider,{value:t},e.children)}}}]);