var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var B=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),C=(n,l)=>{for(var r in l)s(n,r,{get:l[r],enumerable:!0})},a=(n,l,r,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of u(l))!A.call(n,c)&&c!==r&&s(n,c,{get:()=>l[c],enumerable:!(o=y(l,c))||o.enumerable});return n};var f=(n,l,r)=>(r=n!=null?p(D(n)):{},a(l||!n||!n.__esModule?s(r,"default",{value:n,enumerable:!0}):r,n)),m=n=>a(s({},"__esModule",{value:!0}),n);var i=B((b,t)=>{t.exports=_jsx_runtime});var g={};C(g,{default:()=>h});var e=f(i());function d(n){let l={a:"a",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...n.components};return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.h2,{id:"usestate",children:"useState"}),` `,(0,e.jsxs)(l.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(l.figcaption,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"vitesse-dark",children:"useState"}),(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"jsx","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Counter"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" initialCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"initialCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" Count: "}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"initialCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Reset"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"prevCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" prevCount"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"prevCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" prevCount"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})]}),` `,(0,e.jsx)(l.p,{children:"References:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://reactjs.org/docs/hooks-reference.html#:~:text=Basic%20Hooks-,useState,-const%20%5Bstate%2C%20setState",rel:"noopener noreferrer",target:"_blank",children:"useState"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://juhanajauhiainen.com/posts/why-you-should-use-url-to-store-state-in-your-application",rel:"noopener noreferrer",target:"_blank",children:"Why you should use the URL to store state in your application"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"useeffect",children:"useEffect"}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"jsx","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" CountSecrets"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" setSecret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' ""'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" });"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" ==="}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setSecret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" s"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }));"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" },"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" target"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setSecret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" target"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }));"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"input"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"text"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Number of secrets: "}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"References:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/react-useeffect-infinite-loop/",rel:"noopener noreferrer",target:"_blank",children:"How to Solve the Infinite Loop of React.useEffect()"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/react-useeffect-explanation/",rel:"noopener noreferrer",target:"_blank",children:"A Simple Explanation of React.useEffect()"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://reactjs.org/docs/hooks-reference.html#useeffect",rel:"noopener noreferrer",target:"_blank",children:"useEffect()"})}),` `]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"js","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useContext"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" createContext"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" UserContext"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" createContext"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"Unknown"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Application"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" userName"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"John Smith"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:"UserContext.Provider"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"userName"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:"Layout"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Main content"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Layout"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" children"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:"Header"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"main"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Header"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"header"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:"UserInfo"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" UserInfo"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" userName"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useContext"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"UserContext"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"userName"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"};"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"Refrences:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/react-context-and-usecontext/",rel:"noopener noreferrer",target:"_blank",children:"A Guide to React Context and useContext() Hook"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://reactjs.org/docs/hooks-reference.html#usecontext",rel:"noopener noreferrer",target:"_blank",children:"useContext()"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"usememo",children:"useMemo()"}),` `,(0,e.jsxs)(l.p,{children:["By using ",(0,e.jsx)(l.code,{children:"useMemo(() => factorialOf(number), [number])"})," instead of simple ",(0,e.jsx)(l.code,{children:"factorialOf(number)"}),", React memoizes the factorial calculation."]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"js","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useMemo"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" CalculateFactorial"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" setNumber"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"inc"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" setInc"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#758575DD"},children:" // const factorial = factorialOf(number)"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" factorial"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useMemo"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" factorialOf"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"),"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setNumber"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:"Number"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"));"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setInc"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" i"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" Factorial of"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"input"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" value"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onChange"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" is "}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"factorial"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Re-render"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" factorialOf"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"n"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" console"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"factorialOf(n) called!"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" n"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <="}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" ?"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" :"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" n"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" factorialOf"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"n"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["Refrences: ",(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/react-usememo-hook/",rel:"noopener noreferrer",target:"_blank",children:"How to Memoize with React.useMemo()"})]}),` `,(0,e.jsx)(l.h2,{id:"usecallback",children:"useCallback()"}),` `,(0,e.jsxs)(l.p,{children:["One reason to use ",(0,e.jsx)(l.code,{children:"useCallback"})," is to prevent a component from re-rendering unless its props have changed."]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"jsx","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useSearch"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"./fetch-items"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" MyBigList"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" term"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" items"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useSearch"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" map"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}>{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")};"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:"memo"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"MyBigList"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]})]})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"jsx","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" MyParent"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" term"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useCallback"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" console"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"You clicked "}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" event"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"currentTarget"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" },"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:"MyBigList"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" term"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" />;"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"Refrences:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/dont-overuse-react-usecallback/",rel:"noopener noreferrer",target:"_blank",children:"Your Guide to React.useCallback()"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://reactjs.org/docs/hooks-reference.html#usecallback",rel:"noopener noreferrer",target:"_blank",children:"useCallback()"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"usereducer",children:"useReducer()"}),` `,(0,e.jsxs)(l.p,{children:["An alternative to ",(0,e.jsx)(l.code,{children:"useState"}),". Accepts a reducer of type ",(0,e.jsx)(l.code,{children:"(state, action) => newState"}),", and returns the current state paired with a dispatch method. ",(0,e.jsx)(l.code,{children:"useReducer"})," is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one."]}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"useReducer"})," also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks. The ",(0,e.jsx)(l.code,{children:"useReducer(reducer, initialState)"})," hook accept 2 arguments: the ",(0,e.jsx)(l.code,{children:"reducer"})," function and the ",(0,e.jsx)(l.code,{children:"initial state"}),". The hook then returns an array of 2 items: the ",(0,e.jsx)(l.code,{children:"current state"})," and the",(0,e.jsx)(l.code,{children:"dispatch"})," function."]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"js","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" initialState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" reducer"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" action"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" switch"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"action"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"increment"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" state"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"decrement"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" state"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" -"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" default"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" throw"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" new"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Error"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Counter"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" dispatch"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useReducer"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"reducer"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" initialState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" Count: "}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" dispatch"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"decrement"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" dispatch"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#B8A965"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"increment"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" })}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"Refrences:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsxs)(l.a,{href:"https://dmitripavlutin.com/react-usereducer/",rel:"noopener noreferrer",target:"_blank",children:["An Easy Guide to React ",(0,e.jsx)(l.code,{children:"useReducer()"})," Hook"]})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://reactjs.org/docs/hooks-reference.html#usereducer",rel:"noopener noreferrer",target:"_blank",children:"useReducer()"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"useref",children:"useRef()"}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"js","data-theme":"vitesse-dark",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"vitesse-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#C98A7D"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#C98A7D77"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" Stopwatch"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:","}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" startHandler"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" }"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setInterval"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" setCount"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"c"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" c"}),(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"),"}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 1000"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#CB7676"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" stopHandler"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#4C9A91"},children:" 0"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#80A665"},children:" clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" },"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" []);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Timer: "}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"startHandler"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Start"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#4D9375"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:" onClick"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#BD976A"},children:"stopHandler"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"Stop"}),(0,e.jsx)(l.span,{style:{color:"#666666"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#666666"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#666666"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"The 2 main differences between references and state:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:"Updating a reference doesn't trigger re-rendering, while updating the state makes the component re-render."}),` `,(0,e.jsx)(l.li,{children:"The reference update is synchronous (the updated reference value is available right away), while the state update is asynchronous (the state variable is updated after re-rendering)."}),` `]}),` `,(0,e.jsx)(l.p,{children:"References:"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/react-useref-guide/",rel:"noopener noreferrer",target:"_blank",children:"The Complete Guide to useRef() and Refs in React"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://reactjs.org/docs/hooks-reference.html#useref",rel:"noopener noreferrer",target:"_blank",children:"useRef()"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"useful-custom-hooks",children:"Useful Custom Hooks"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://usehooks.com/",rel:"noopener noreferrer",target:"_blank",children:"useHooks"})}),` `]})]})}function h(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(d,{...n})}):d(n)}return m(g);})(); ;return Component;

Snippets