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:"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-fBYf8J48RJ":{_path:B,_dir:"react",_draft:u,_partial:u,_locale:"en",_empty:u,title:A,description:l,excerpt:{type:C,children:[{type:a,tag:m,props:{code:v,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:l},children:[{type:c,value:v}]}]}]}]},body:{type:C,children:[{type:a,tag:m,props:{code:v,language:D},children:[{type:a,tag:E,props:{},children:[{type:a,tag:m,props:{__ignoreMap:l},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:w}]},{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:k},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:j},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:j},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:j},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:j},children:[{type:c,value:" *\u002F"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F eslint-disable-next-line import\u002Fno-unused-modules"}]}]},{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-ba020e"},children:[{type:c,value:r}]},{type:a,tag:b,props:{class:"ct-26e0d6"},children:[{type:c,value:":"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:g}]},{type:a,tag:b,props:{class:"ct-8e5d2c"},children:[{type:c,value:"Record"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:"\u003C"}]},{type:a,tag:b,props:{class:x},children:[{type:c,value:"string"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:w}]},{type:a,tag:b,props:{class:x},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: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:k},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-0d0319"},children:[{type:c,value:z}]},{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:x},children:[{type:c,value:"Object"}]},{type:a,tag:b,props:{class:i},children:[{type:c,value:s}]},{type:a,tag:b,props:{class:"ct-c9fe01"},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:t}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:z}]},{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:t}]},{type:a,tag:b,props:{class:j},children:[{type:c,value:"\u002F\u002F eslint-disable-next-line no-console"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:t}]},{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:k},children:[{type:c,value:"`${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:y}]},{type:a,tag:b,props:{class:k},children:[{type:c,value:"} ${"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:Q}]},{type:a,tag:b,props:{class:k},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:z}]},{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:w}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:y}]},{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-c9fe01{color:#D2A8FF}.ct-0d0319{color:#79C0FF}.ct-60fd4b{color:#79C0FF}.ct-8e5d2c{color:#FFA657}.ct-26e0d6{color:#FF7B72}.ct-ba020e{color:#FFA657}.ct-fefda7{color:#C9D1D9}.ct-131b26{color:#D2A8FF}.ct-2faca4{color:#FF7B72}.ct-0798ef{color:#8B949E}.ct-40ce70{color:#A5D6FF}.ct-802d67{color:#C9D1D9}.ct-0cbef8{color:#C9D1D9}.ct-72bd24{color:#FF7B72}.light .ct-72bd24{color:#859900}.light .ct-0cbef8{color:#657B83}.light .ct-802d67{color:#268BD2}.light .ct-40ce70{color:#2AA198}.light .ct-0798ef{color:#93A1A1}.light .ct-2faca4{color:#073642}.light .ct-131b26{color:#268BD2}.light .ct-fefda7{color:#657B83}.light .ct-ba020e{color:#657B83}.light .ct-26e0d6{color:#859900}.light .ct-8e5d2c{color:#268BD2}.light .ct-60fd4b{color:#859900}.light .ct-0d0319{color:#268BD2}.light .ct-c9fe01{color:#268BD2}"}]}],toc:{title:l,searchDepth:R,depth:R,links:[]}},_type:"markdown",_id:"content:Frontend:React:useWhatsChanged.md",_source:"content",_file:"Frontend\u002FReact\u002FuseWhatsChanged.md",_extension:"md"}},prerenderedAt:1703695530462}}("element","span","text","ct-0cbef8","line","ct-802d67"," ","ct-72bd24","ct-fefda7","ct-0798ef","ct-40ce70","","code","ct-2faca4","ct-131b26","=","  ","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\n\u002F\u002F eslint-disable-next-line import\u002Fno-unused-modules\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        \u002F\u002F eslint-disable-next-line no-console\n        console.log(`${prefix} ${key} has changed`);\n      }\n    });\n\n    prevProps.current = props;\n  }, [props, prefix]);\n};\n\n",", ","ct-60fd4b","prefix","prevProps","UseWhatsChanged","\u002Ffrontend\u002Freact\u002Fusewhatschanged","root","typescript","pre","useEffect","useRef",";","const"," (","=\u003E"," {","(",");","    ","current","key",2))