muerwre.github.io/docs/frontend/react/detect-hook-deps-changes-with-usewhatschanged/_payload.js

export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:"Automatic Grid Like Masonry With Pure CSS",_path:"\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css"},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Common Things With Docker Mailserver",_path:"\u002Fdocker\u002Fcommon-things-with-docker-mailserver"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"},{title:A,_path:B}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Golang",_path:"\u002Fgolang",children:[{title:"I18n In Golang",_path:"\u002Fgolang\u002Fi18n-in-golang"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Find Out Who Uses Swap",_path:"\u002Flinux\u002Ffind-out-who-uses-swap"},{title:"Fixing Lagging USB Headphones",_path:"\u002Flinux\u002Ffixing-lagging-usb-headphones"},{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Linux On Asus Zenbook UM3402 YA",_path:"\u002Flinux\u002Flinux-on-asus-zenbook-um3402-ya"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-1DsgTOuGa0":{_path:B,_dir:"react",_draft:t,_partial:t,_locale:"en",_empty:t,title:A,description:k,excerpt:{type:C,children:[{type:a,tag:l,props:{code:u,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:l,props:{__ignoreMap:k},children:[{type:c,value:u}]}]}]}]},body:{type:C,children:[{type:a,tag:l,props:{code:u,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:l,props:{__ignoreMap:k},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:"import"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" { "}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:" } "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"from"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"'react'"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:"\u002F** Pass dictionary of `props` as argument and it will"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:" * tell you, which one changed after rerender."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:" * Use `prefix` to distinguish props of different components."}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:m},children:[{type:c,value:" *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:h},children:[{type:c,value:"export"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"useWhatsChanged"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:"ct-9c555a"},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:"ct-7c9693"},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-682427"},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003C"}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"unknown"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003E,"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"''"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:","}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:") "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:I}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-7def83"},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:G}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:q}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:F}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"(() "}]},{type:a,tag:b,props:{class:n},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:i},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"Object"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:"ct-af5044"},children:[{type:c,value:"entries"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"      "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"if"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:J}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"] "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"!=="}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"value"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"      ) {"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:z}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"console"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:o},children:[{type:c,value:"log"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:M}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"`${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"} ${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"} has changed`"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:N}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"      }"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"    });"}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:P}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:H}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"  }, ["}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:v}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:"]);"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:"};"}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-af5044{color:#D2A8FF}.ct-7def83{color:#79C0FF}.ct-e1c665{color:#79C0FF}.ct-682427{color:#FFA657}.ct-7c9693{color:#FF7B72}.ct-9c555a{color:#FFA657}.ct-7321a2{color:#C9D1D9}.ct-fddfb0{color:#D2A8FF}.ct-e2ac3d{color:#FF7B72}.ct-7a0006{color:#8B949E}.ct-6d5d08{color:#A5D6FF}.ct-3cce2a{color:#C9D1D9}.ct-1ee419{color:#C9D1D9}.ct-7ec539{color:#FF7B72}.light .ct-7ec539{color:#859900}.light .ct-1ee419{color:#657B83}.light .ct-3cce2a{color:#268BD2}.light .ct-6d5d08{color:#2AA198}.light .ct-7a0006{color:#93A1A1}.light .ct-e2ac3d{color:#073642}.light .ct-fddfb0{color:#268BD2}.light .ct-7321a2{color:#657B83}.light .ct-9c555a{color:#657B83}.light .ct-7c9693{color:#859900}.light .ct-682427{color:#268BD2}.light .ct-e1c665{color:#859900}.light .ct-7def83{color:#268BD2}.light .ct-af5044{color:#268BD2}"}]}],toc:{title:k,searchDepth:R,depth:R,links:[]}},_type:"markdown",_id:"content:Frontend:React:Detect hook deps changes with useWhatsChanged.md",_source:"content",_file:"Frontend\u002FReact\u002FDetect hook deps changes with useWhatsChanged.md",_extension:"md"}},prerenderedAt:1703697991827}}("element","span","text","ct-1ee419","line","ct-3cce2a"," ","ct-7ec539","ct-7321a2","ct-6d5d08","","code","ct-7a0006","ct-e2ac3d","ct-fddfb0","=","  ","props",".",false,"import { useEffect, useRef } from 'react';\n\n\u002F** Pass dictionary of `props` as argument and it will\n * tell you, which one changed after rerender.\n * Use `prefix` to distinguish props of different components.\n *\u002F\nexport const useWhatsChanged = (\n  props: Record\u003Cstring, unknown\u003E,\n  prefix = '',\n) =\u003E {\n  const prevProps = useRef(props);\n\n  useEffect(() =\u003E {\n    Object.entries(props).forEach(([key, value]) =\u003E {\n      if (\n        !Object.prototype.hasOwnProperty.call(prevProps.current, key) ||\n        prevProps.current[key] !== value\n      ) {\n        console.log(`${prefix} ${key} has changed`);\n      }\n    });\n\n    prevProps.current = props;\n  }, [props, prefix]);\n};\n\n",", ","ct-e1c665","prefix","prevProps","        ","Detect Hook Deps Changes With UseWhatsChanged","\u002Ffrontend\u002Freact\u002Fdetect-hook-deps-changes-with-usewhatschanged","root","typescript","pre","useEffect","useRef",";","const"," (","=\u003E"," {","(",");","    ","current","key",2))