var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var C=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var D=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),F=(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 y(l))!A.call(n,c)&&c!==r&&s(n,c,{get:()=>l[c],enumerable:!(o=p(l,c))||o.enumerable});return n};var E=(n,l,r)=>(r=n!=null?h(C(n)):{},a(l||!n||!n.__esModule?s(r,"default",{value:n,enumerable:!0}):r,n)),B=n=>a(s({},"__esModule",{value:!0}),n);var i=D((v,t)=>{t.exports=_jsx_runtime});var g={};F(g,{default:()=>m,frontmatter:()=>u});var e=E(i()),u={title:"React Hooks",publishedAt:new Date(16663104e5),summary:"Syntax of native hooks and useful custom hooks",image:"/images/blog/workstation.jpeg",draft:!1,toc:!1};function d(n){let l=Object.assign({h2:"h2",div:"div",pre:"pre",code:"code",span:"span",p:"p",ul:"ul",li:"li",a:"a"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.h2,{id:"usestate",children:"useState"}),` `,(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"jsx","data-theme":"default",children:"useState"}),(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"Counter"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"initialCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"initialCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<>"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" Count: {count}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"initialCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"}>Reset"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"prevCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" prevCount "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"}>-"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"prevCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" prevCount "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"}>+"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},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",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",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.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"CountSecrets"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"setSecret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"});"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setSecret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"countSecrets"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}));"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }, ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"secret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setSecret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ({"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"s"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}));"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"input"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"text"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{secret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"value} "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{onChange} />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">Number of secrets: {secret"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"countSecrets}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},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/",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/",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",children:"useEffect()"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"usecontext",children:"useContext()"}),` `,(0,e.jsx)(l.p,{children:"The React context provides data to components no matter how deep they are in the components tree. The context is used to manage global data, e.g. global state, theme, services, user settings, and more."}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useContext"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"createContext"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"UserContext"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"createContext"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"Unknown"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"Application"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"userName"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"John Smith"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"UserContext.Provider"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{userName}>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"Layout"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">Main content"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"Layout"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"Header"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"main"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">{children}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"Header"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"header"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"UserInfo"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"UserInfo"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"userName"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useContext"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"UserContext"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">{userName}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},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/",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",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.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useMemo"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"CalculateFactorial"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"setNumber"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"inc"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"setInc"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#767C9DB0",fontStyle:"italic"},children:"// const factorial = factorialOf(number)"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"factorial"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useMemo"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"factorialOf"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"), ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setNumber"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"Number"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"target"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"));"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setInc"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" Factorial of"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"input"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{number} "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{onChange} />"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" is {factorial}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{onClick}>Re-render"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"factorialOf"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"n"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"console"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"factorialOf(n) called!"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"n"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"<="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"n"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"factorialOf"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"n"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["Refrences: ",(0,e.jsx)(l.a,{href:"https://dmitripavlutin.com/react-usememo-hook/",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.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useSearch"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"./fetch-items"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"MyBigList"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useSearch"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{onItemClick}>{item}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">{items"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"export default "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"memo"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"MyBigList"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]})]})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useCallback"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"MyParent"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useCallback"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"console"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"You clicked "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"currentTarget"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" },"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"]"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"MyBigList"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"term"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{term} "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onItemClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{onItemClick} />"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},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/",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",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.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"initialState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"};"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"reducer"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"action"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" switch ("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"action"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" case "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"increment"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" case "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"decrement"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"};"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" default:"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D0679D"},children:"throw"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"Error"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"();"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"Counter"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"state"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"dispatch"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useReducer"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"reducer"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"initialState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" Count: {state"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"count}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"dispatch"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"decrement"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"}>-"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"dispatch"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"({"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"increment"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"}>+"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},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/",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",children:"useReducer()"})}),` `]}),` `,(0,e.jsx)(l.h2,{id:"useref",children:"useRef()"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{className:"poimandres",style:{backgroundColor:"#1b1e28"},tabIndex:"0","data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"import "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:","}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"Stopwatch"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"count"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"startHandler"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" if ("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setInterval"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"setCount"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"c"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"c"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"), "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"1000"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#ADD7FF"},children:"stopHandler"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:";"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" };"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FBD0"},children:"clearInterval"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"timerIdRef"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:");"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" }, []);"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">Timer: {count}s"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{startHandler}>Start"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#5DE4C7"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#91B4D5",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#91B4D5"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:"{stopHandler}>Stop"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#E4F0FB"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},children:" );"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#A6ACCD"},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/",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",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/",children:"useHooks"})}),` `]})]})}function f(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(d,n)})):d(n)}var m=f;return B(g);})(); ;return Component;

Articles