var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var F=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),m=(n,e)=>{for(var r in e)c(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!u.call(n,s)&&s!==r&&c(n,s,{get:()=>e[s],enumerable:!(o=E(e,s))||o.enumerable});return n};var g=(n,e,r)=>(r=n!=null?h(y(n)):{},a(e||!n||!n.__esModule?c(r,"default",{value:n,enumerable:!0}):r,n)),f=n=>a(c({},"__esModule",{value:!0}),n);var i=F((C,t)=>{t.exports=_jsx_runtime});var x={};m(x,{default:()=>v,frontmatter:()=>B});var l=g(i()),B={title:"Conquering React Hooks: A Comprehensive Guide",description:"In this article, I will reveal in a clear and simplified way how React Hooks can work magic in your projects, just as I would have liked to learn when I discovered them.",date:"2024-01-24",url:"/",hero:"/images/blog/posts/cover/crafting-react-hooks.webp",tags:["react","javascript","typescript"],published:!0,lang:"en"};function d(n){let e=Object.assign({p:"p",h3:"h3",a:"a",span:"span",blockquote:"blockquote",strong:"strong",code:"code",h2:"h2",img:"img",div:"div",pre:"pre",ul:"ul",li:"li"},n.components);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(e.p,{children:"In this article, I will reveal in a clear and simplified way how React Hooks can work magic in your projects, just as I would have liked to learn when I discovered them."}),` `,(0,l.jsxs)(e.h3,{id:"-hooks-the-magic-of-react",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-hooks-the-magic-of-react",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1FA9D} Hooks: The Magic of React"]}),` `,(0,l.jsx)(e.p,{children:"In React, hooks are utilities that allow us to execute arbitrary code in our components based on specific actions. Hooks provide a way to reuse state and side-effect logic in functional components in a simpler and more declarative manner."}),` `,(0,l.jsxs)(e.blockquote,{children:[` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.strong,{children:"\u{1F6A8} Important:"})," This guide uses ",(0,l.jsx)(e.code,{children:"TypeScript"})," code snippets to illustrate the concepts. If you are not familiar with TypeScript, feel free to ignore the typing in the examples."]}),` `]}),` `,(0,l.jsxs)(e.h2,{id:"-basic-hooks",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-basic-hooks",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F331} Basic Hooks"]}),` `,(0,l.jsxs)(e.p,{children:["This reference guide will discuss all the Hooks natively available in React, but first, let\u2019s start with the basic React Hooks:\xA0",(0,l.jsx)(e.code,{children:"useState"}),",\xA0",(0,l.jsx)(e.code,{children:"useEffect"}),", and\xA0",(0,l.jsx)(e.code,{children:"useContext"}),"."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"https://fraineralex.dev/images/blog/posts/content/basic-hooks.webp",alt:"React basic hooks image"})}),` `,(0,l.jsxs)(e.h2,{id:"-usestate",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-usestate",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u26A1 useState"]}),` `,(0,l.jsx)(e.p,{children:"It is a hook that allows functional components to manage and maintain their internal state. You can use it to declare state variables and access them in your functional components."}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["The signature for the\xA0",(0,l.jsx)(e.code,{children:"useState"}),"\xA0Hook is as follows:"]})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"state"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(initialState)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["Here,\xA0",(0,l.jsx)(e.code,{children:"state"}),"\xA0and\xA0",(0,l.jsx)(e.code,{children:"setState"}),"\xA0refer to the state value and updater function returned on invoking\xA0",(0,l.jsx)(e.code,{children:"useState"}),"\xA0with some\xA0",(0,l.jsx)(e.code,{children:"initialState"}),"."]}),` `,(0,l.jsxs)(e.p,{children:["It\u2019s important to note that when your component first renders and invokes\xA0",(0,l.jsx)(e.code,{children:"useState"}),", the\xA0",(0,l.jsx)(e.code,{children:"initialState"}),"\xA0is the returned state from\xA0",(0,l.jsx)(e.code,{children:"useState"}),"."]}),` `,(0,l.jsxs)(e.p,{children:["Also, to update state, the state updater function\xA0",(0,l.jsx)(e.code,{children:"setState"}),"\xA0should be invoked with a new state value, as shown below:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(newValue)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["By doing this, a new re-render of the component is queued.\xA0",(0,l.jsx)(e.code,{children:"useState"}),"\xA0guarantees that the\xA0",(0,l.jsx)(e.code,{children:"state"}),"\xA0value will always be the most recent after applying updates."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["Example of using ",(0,l.jsx)(e.code,{children:"useState"})," in a React component about the follow card of X:"]})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"XFollowCard"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"fullName"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"userName"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"initialIsFollowing"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"isFollowing"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setIsFollowing"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(initialIsFollowing) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// <-- Definition"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"text"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isFollowing "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Following'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Follow'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"buttonClassName"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" isFollowing"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-button is-following'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-button'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"handleClick"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setIsFollowing"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"isFollowing) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Changing the state"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"article"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"header"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-header'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"img"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-avatar'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"alt"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'user avatar'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"src"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`https://unavatar.io/${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"userName"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-info'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"strong"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{fullName}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-infoUserName'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">@{userName}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"aside"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{buttonClassName} "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleClick}>"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-text'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">{text}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"span"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'tw-followCard-stopFollow'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Unfollow"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.h2,{id:"-useeffect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-useeffect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F3AC} useEffect"]}),` `,(0,l.jsxs)(e.p,{children:["It is a React hook that allows performing side effects in functional components. You can use it to execute code in response to changes in the component, such as making API requests, subscribing to events, or updating the DOM. ",(0,l.jsx)(e.code,{children:"useEffect"})," receives a function as an argument and executes it after the component is rendered or when certain dependencies change."]}),` `,(0,l.jsxs)(e.p,{children:["The basic signature of\xA0",(0,l.jsx)(e.code,{children:"useEffect"}),"\xA0is as follows:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"//..."})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["Example of using ",(0,l.jsx)(e.code,{children:"useEffect"})," in a React component:"]})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"CAT_PREFIX_IMAGE_URL"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'https://cataas.com'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useCatImage"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"fact"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"fact"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"imageUrl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setImageUrl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"!"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"fact) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"threeFirstWords"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" fact."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"split"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"3"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"join"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"' '"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"fetch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`https://cataas.com/cat/says/${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"threeFirstWords"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}?size=50&color=red&json=true`"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"then"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"res"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" res."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"json"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"())"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"then"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"response"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"url"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" response"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setImageUrl"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(url)"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [fact])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { imageUrl: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"CAT_PREFIX_IMAGE_URL"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"imageUrl"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.h3,{id:"-cleaning-up-an-effect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-cleaning-up-an-effect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F9F9} Cleaning up an effect"]}),` `,(0,l.jsxs)(e.p,{children:["Some imperative code need to be cleaned up e.g. to prevent memory leaks. For example, subscriptions need to be cleaned up, timers need to be invalidated etc. To do this return a function from the callback passed to\xA0",(0,l.jsx)(e.code,{children:"useEffect"}),":"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"subscription"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" props."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"apiSubscripton"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// clean up the subscription"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" subscription."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"unsubscribeApi"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsx)(e.p,{children:"The clean-up function is guaranteed to be invoked before the component is removed from the user interface."}),` `,(0,l.jsxs)(e.h3,{id:"\uFE0F-avoid-infinite-loops",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\uFE0F-avoid-infinite-loops",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u26A0\uFE0F Avoid Infinite Loops"]}),` `,(0,l.jsxs)(e.p,{children:["When using ",(0,l.jsx)(e.code,{children:"useEffect"})," in React, it's crucial to avoid infinite loops that can arise from incorrect effect configurations. One common mistake is modifying the state within the effect body in a way that triggers infinite renderings."]}),` `,(0,l.jsxs)(e.blockquote,{children:[` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.strong,{children:"Common Cause of Infinite Loops:"})," Directly Modifying State"]}),` `]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Incorrect: Modifying state within the effect body"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}, [count])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsx)(e.p,{children:"This example causes an infinite loop by updating the state within the effect, triggering new renderings and re-executing the effect."}),` `,(0,l.jsxs)(e.h3,{id:"-solution",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-solution",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Solution"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Correct: Use the setCount callback to update the state based on the previous state."})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// This ensures that the state update doesn't cause an infinite loop."})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"prevCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" prevCount "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}, [count])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["Avoid infinite loops by ensuring that the dependencies in the ",(0,l.jsx)(e.code,{children:"useEffect"})," dependency array are stable and do not change within the effect body. In this case, by using the ",(0,l.jsx)(e.code,{children:"setCount"})," callback to update the state based on the previous state, we prevent the infinite loop."]}),` `,(0,l.jsxs)(e.h2,{id:"-usecontext",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-usecontext",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F91D} useContext"]}),` `,(0,l.jsxs)(e.p,{children:["The problem that ",(0,l.jsx)(e.code,{children:"useContext"})," solves lies in the need to pass data through the component hierarchy without resorting to prop drilling, which is when props are manually passed through multiple levels of components. This approach can become cumbersome and impractical as the application grows, as each intermediate component has to relay the props, generating less clean and error-prone code."]}),` `,(0,l.jsxs)(e.h3,{id:"-prop-drilling-the-challenge",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-prop-drilling-the-challenge",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u274C Prop Drilling: The Challenge"]}),` `,(0,l.jsxs)(e.p,{children:["Imagine a scenario where we have a ",(0,l.jsx)(e.code,{children:"ComponentA"})," that needs to pass data to ",(0,l.jsx)(e.code,{children:"ComponentD"}),". Traditional prop drilling would involve passing the props through all intermediate components, even if ",(0,l.jsx)(e.code,{children:"ComponentB"})," and ",(0,l.jsx)(e.code,{children:"ComponentC"})," do not need that data."]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// ComponentA.tsx"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ComponentA"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ComponentB"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{dataForD} />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// ComponentB.tsx"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ComponentB"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ComponentC"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{dataForD} />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// ComponentC.tsx"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ComponentC"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ComponentD"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{dataForD} />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// ComponentD.tsx"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ComponentD"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"dataForD"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Use dataForD here"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsx)(e.p,{children:"This process, known as prop drilling, can become unmanageable and complicated as more components are added to the hierarchy."}),` `,(0,l.jsxs)(e.h3,{id:"-solution-usecontext-to-the-rescue",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-solution-usecontext-to-the-rescue",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Solution: ",(0,l.jsx)(e.code,{children:"useContext"})," to the Rescue"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useContext"})," greatly simplifies this task by allowing us to create and consume a context without manually passing props through each component. First, we create a context using ",(0,l.jsx)(e.code,{children:"createContext"}),":"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// ThemeContext.ts"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { createContext } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ThemeContext"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"createContext"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]})]})})}),` `,(0,l.jsxs)(e.p,{children:["Then, we use the ",(0,l.jsx)(e.code,{children:"Provider"})," component to wrap our component tree with the desired value:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// App.tsx"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ThemeContext } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'./ThemeContext'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"App"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"ThemeContext.Provider"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'dark'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"/* Nested components here */"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["Finally, in any component within this context, we can use ",(0,l.jsx)(e.code,{children:"useContext"})," to access the data without manually passing props:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Button.tsx"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React, { useContext } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ThemeContext } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'./ThemeContext'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"theme"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useContext"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(ThemeContext)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{theme}>Click here"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.blockquote,{children:[` `,(0,l.jsx)(e.p,{children:"Note that the value passed to\xA0useContext\xA0must be the context object, i.e., the return value from invoking\xA0React.createContext, not\xA0ContextObject.Provider\xA0or\xA0ContextObject.Consumer."}),` `]}),` `,(0,l.jsxs)(e.p,{children:["This solution avoids the cumbersome prop drilling and provides a cleaner and more efficient way to share data across components in a React application. ",(0,l.jsx)(e.code,{children:"useContext"})," makes data management more elegant and easy to maintain."]}),` `,(0,l.jsx)(e.p,{children:"Goodbye, prop drilling! \u{1F44B}"}),` `,(0,l.jsxs)(e.h2,{id:"-additional-hooks",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-additional-hooks",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F31F} Additional Hooks"]}),` `,(0,l.jsx)(e.p,{children:"The following hooks are variants of the basic hooks discussed in the sections above. If you\u2019re new to hooks don\u2019t bother learning these right now. They are only needed for specific edge cases."}),` `,(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"https://fraineralex.dev/images/blog/posts/content/additional-hooks.webp",alt:"React additional hooks image"})}),` `,(0,l.jsxs)(e.h2,{id:"-useref",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-useref",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F4CC} useRef"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useRef"})," in React is a hook that makes it easy to create mutable references. Unlike ",(0,l.jsx)(e.code,{children:"useState"}),", ",(0,l.jsx)(e.code,{children:"useRef"})," doesn't trigger component re-renders when its value changes, making it a powerful tool for holding data that doesn't directly affect the user interface."]}),` `,(0,l.jsxs)(e.p,{children:["Here\u2019s how the\xA0",(0,l.jsx)(e.code,{children:"useRef"}),"\xA0hook is used:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useRef } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"MyComponent"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"myRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(initialValue)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// ..."})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.h3,{id:"-challenge",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-challenge",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F977}\u{1F3FB} Challenge"]}),` `,(0,l.jsxs)(e.p,{children:["The problem that ",(0,l.jsx)(e.code,{children:"useRef"})," solves becomes apparent when we need to update values without triggering a visual representation update of the component. To illustrate this, let's consider a movie search scenario:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"search"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"search"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"movies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"([])"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"loading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setLoading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"error"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setError"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"getMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"async"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// \u274C This is a bad practice because we are fetching"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// the movies and re-rendering the component again"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// even if the search is the same as the previous one."})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"try"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setLoading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setError"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"newMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"await"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"searchMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ search })"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(newMovies)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"catch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"error"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"any"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setError"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(error.message)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"finally"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setLoading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { movies, getMovies, loading, error }"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this case, using ",(0,l.jsx)(e.code,{children:"useState"})," for the search term causes unnecessary renderings every time the search term changes. This is where ",(0,l.jsx)(e.code,{children:"useRef"})," becomes an efficient solution by allowing us to update ",(0,l.jsx)(e.code,{children:"search"})," without affecting the user interface:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"search"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"search"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"movies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"([])"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"loading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setLoading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"error"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setError"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"previousSearch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(search) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// <-- Define a ref"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"getMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"async"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// \u2705 If the current search is the same to before search: return"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (previousSearch.current "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"==="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" search) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"try"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setLoading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"true"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setError"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" previousSearch.current "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" search"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"newMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"await"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"searchMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ search })"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setMovies"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(newMovies)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"catch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"error"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"any"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setError"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(error.message)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"finally"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setLoading"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { movies, getMovies, loading, error }"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["With this implementation, ",(0,l.jsx)(e.code,{children:"useRef"})," helps manage the value of ",(0,l.jsx)(e.code,{children:"search"})," without causing unwanted visual updates, improving efficiency and the user experience."]}),` `,(0,l.jsxs)(e.h2,{id:"-usememo",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-usememo",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F9E0} useMemo"]}),` `,(0,l.jsxs)(e.p,{children:["The ",(0,l.jsx)(e.code,{children:"useMemo"})," hook in React is a powerful tool for optimizing performance by memorizing the result of a function. Its main purpose is to prevent unnecessary computations, reusing the previously calculated value if the dependencies haven't changed."]}),` `,(0,l.jsxs)(e.p,{children:["Here\u2019s how the\xA0",(0,l.jsx)(e.code,{children:"useMemo"}),"\xA0hook is used:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"readTime"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useMemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"wordsPerMinute"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"200"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"words"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" text."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"trim"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"split"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"/"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"\\s"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"/"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")."}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"length"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Math."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ceil"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(words "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"/"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" wordsPerMinute)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"value"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"} min read`"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}, [text]) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// only recompute if text changes"})]})]})})}),` `,(0,l.jsxs)(e.p,{children:["The problem that ",(0,l.jsx)(e.code,{children:"useMemo"})," addresses becomes apparent when we need to perform expensive calculations in a component, but those calculations are not necessary every time the component renders. Let's take the example of the ",(0,l.jsx)(e.code,{children:"Counter"})," component:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Counter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"double"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Costly calculation performed on every render"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Contador: {count}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Doble: {double}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this case, the double value is recalculated on every render, even if ",(0,l.jsx)(e.code,{children:"count"})," hasn't changed. ",(0,l.jsx)(e.code,{children:"useMemo"})," solves this by memorizing the result of the calculation only when the dependencies, in this case, the ",(0,l.jsx)(e.code,{children:"count"})," prop, have changed:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useMemo } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Counter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"number"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"double"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useMemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"2"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", [count])"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Contador: {count}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Doble: {double}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["With ",(0,l.jsx)(e.code,{children:"useMemo"}),", if the ",(0,l.jsx)(e.code,{children:"count"})," prop hasn't changed, the recalculation of double is avoided, and the previously calculated value is reused. This significantly improves the efficiency of the component, especially in situations where calculations are more resource-intensive."]}),` `,(0,l.jsxs)(e.h2,{id:"\uFE0F-usecallback",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\uFE0F-usecallback",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u267B\uFE0F useCallback"]}),` `,(0,l.jsxs)(e.p,{children:["The ",(0,l.jsx)(e.code,{children:"useCallback"})," hook in React provides a way to memorize functions. The main advantage is to avoid creating new functions on each render, returning the previously memorized function if the dependencies haven't changed."]}),` `,(0,l.jsxs)(e.p,{children:["Here\u2019s how the\xA0",(0,l.jsx)(e.code,{children:"useCallback"})," hook is used:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"memoizedCallback"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useCallback"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(callback, arrayDependency)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["The problem that ",(0,l.jsx)(e.code,{children:"useCallback"})," addresses becomes apparent when we need to pass functions to child components and want to avoid creating new instances of those functions on each render. Let's take the example of the ",(0,l.jsx)(e.code,{children:"Counter"})," component:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Counter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"onIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"handleIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count)"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Contador: {count}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleIncrement}>Incrementar"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this case, ",(0,l.jsx)(e.code,{children:"handleIncrement"})," is recreated on every render, which is not efficient, especially if ",(0,l.jsx)(e.code,{children:"onIncrement"})," and ",(0,l.jsx)(e.code,{children:"count"})," haven't changed. ",(0,l.jsx)(e.code,{children:"useCallback"})," addresses this by memorizing the function only when the dependencies change:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useCallback } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Counter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"onIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"handleIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useCallback"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count)"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [count, onIncrement]) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// only re-create if count or onIncrement change"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Contador: {count}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleIncrement}>Incrementar"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["With ",(0,l.jsx)(e.code,{children:"useCallback"}),", if ",(0,l.jsx)(e.code,{children:"count"})," or ",(0,l.jsx)(e.code,{children:"onIncrement"})," haven't changed, creating a new function is avoided, and the previously calculated function is reused. This improves efficiency and contributes to a more optimal component performance."]}),` `,(0,l.jsxs)(e.h2,{id:"\uFE0F-useid",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\uFE0F-useid",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F3F7}\uFE0F useId"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useId"})," is a React hook designed to generate unique identifiers, ideal for assigning them to HTML tag attributes. This practice becomes especially useful for improving accessibility by establishing specific relationships between elements."]}),` `,(0,l.jsxs)(e.p,{children:["Here\u2019s how the\xA0",(0,l.jsx)(e.code,{children:"useId"})," hook is used:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"passwordHintId"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useId"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]})})})}),` `,(0,l.jsx)(e.p,{children:"Next, the generated ID is used in different attributes:"}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<>"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'password'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-describedby"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{passwordHintId} />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{passwordHintId}>"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:""})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["The problem that ",(0,l.jsx)(e.code,{children:"useId"})," addresses arises when we need to assign unique identifiers to HTML elements, especially in situations where a component may appear multiple times on the screen. Let's take the example of the ",(0,l.jsx)(e.code,{children:"PasswordField"})," component:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useId } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"PasswordField"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"passwordHintId"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useId"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"label"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Password:"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'password'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-describedby"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{passwordHintId} />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"id"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{passwordHintId}>"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" The password must be 18 characters long and contain special characters."})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this case, ",(0,l.jsx)(e.code,{children:"useId"})," is used to generate a unique ID (",(0,l.jsx)(e.code,{children:"passwordHintId"}),") that is assigned to both the ",(0,l.jsx)(e.code,{children:"aria-describedby"})," attribute of the input and the ",(0,l.jsx)(e.code,{children:"id"})," of the paragraph. This ensures that even if ",(0,l.jsx)(e.code,{children:"PasswordField"})," appears multiple times on the screen, the generated IDs will not conflict."]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"App"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"h2"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Choose password"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"PasswordField"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"h2"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Confirm password"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"PasswordField"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In the ",(0,l.jsx)(e.code,{children:"App"})," component, where ",(0,l.jsx)(e.code,{children:"PasswordField"})," is used twice, ",(0,l.jsx)(e.code,{children:"useId"})," ensures that automatically generated identifiers avoid duplicates and provide a robust solution for assigning unique IDs in repeated contexts. This contributes to improving accessibility and consistency in the application."]}),` `,(0,l.jsxs)(e.h2,{id:"\uFE0F-usereducer",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\uFE0F-usereducer",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F579}\uFE0F useReducer"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useReducer"})," is a React hook designed to manage the state of a component using an action-based and reduction-oriented approach, similar to the pattern used in Redux. This hook becomes preferable over ",(0,l.jsx)(e.code,{children:"useState"})," when the state of a component is more complex or when state updates depend on the previous state or previous actions."]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useReducer"})," takes two arguments: a reducing function and the initial state. The reducing function receives two arguments: the current state and an action that describes how the state should change. The reducing function returns the new state."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["Here\u2019s how the\xA0",(0,l.jsx)(e.code,{children:"useReducer"})," hook is used:"]})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"state"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"dispatch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useReducer"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(reducer, initialArgument, init)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["The problem that ",(0,l.jsx)(e.code,{children:"useReducer"})," addresses arises when the state of a component becomes more complex, and state updates depend on multiple factors or actions. Let's take the example of the ",(0,l.jsx)(e.code,{children:"Counter"})," component:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Counter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"handleIncrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"handleDecrement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Count: {count}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleIncrement}>Increment"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{handleDecrement}>Decrement"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this example, we use ",(0,l.jsx)(e.code,{children:"useState"})," to manage the state of the counter. While this can work for simple cases, as the logic of the state becomes more complex or depends on previous actions, the code can become harder to maintain. ",(0,l.jsx)(e.code,{children:"useReducer"})," provides a more organized structure and a more scalable solution for handling complex states and actions in situations where the code could become confusing using only ",(0,l.jsx)(e.code,{children:"useState"}),". We would approach this problem with useReducer as follows:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Define the reducing function"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"counterReducer"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"state"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"State"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"action"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Action"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"switch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (action.type) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"case"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'increment'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:":"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { count: state.count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"+"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"case"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'decrement'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:":"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { count: state.count "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:":"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" state"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"Counter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Use useReducer to manage the state of the counter"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"state"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"dispatch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useReducer"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(counterReducer, { count: "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Count: {state.count}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"dispatch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ type: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'increment'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })}>Increment"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"button"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"onClick"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"dispatch"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ type: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'decrement'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })}>Decrement"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.h2,{id:"-useimperativehandle",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-useimperativehandle",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2728 useImperativeHandle"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useImperativeHandle"})," in React is a handy tool when you need to control and customize the external interface of a functional component, especially when working with refs. Imagine the challenge you would face without this hook."]}),` `,(0,l.jsxs)(e.h3,{id:"-challenge-without-useimperativehandle",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-challenge-without-useimperativehandle",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F914} Challenge Without ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),":"]}),` `,(0,l.jsxs)(e.p,{children:["Let's assume we have a functional component called ",(0,l.jsx)(e.code,{children:"FancyInput"})," that encapsulates a text input. We want the parent component to access and manipulate the input value directly and also trigger focus on that input. Without ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),", we might end up with less efficient and error-prone code."]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"FancyInput"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"inputRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLInputElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"focusInput"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (inputRef.current) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" inputRef.current."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"focus"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{inputRef} />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"/* Challenge: How to expose the `focusInput` method to the parent component? */"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this scenario, exposing the ",(0,l.jsx)(e.code,{children:"focusInput"})," method to the parent component would be a challenging and inelegant task. This is where ",(0,l.jsx)(e.code,{children:"useImperativeHandle"})," comes into play."]}),` `,(0,l.jsxs)(e.h3,{id:"-solution-with-useimperativehandle",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-solution-with-useimperativehandle",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Solution with ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),":"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FancyInput"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"inputRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLInputElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Use useImperativeHandle to customize the external interface"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useImperativeHandle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(ref, () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"focus"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (inputRef.current) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" inputRef.current."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"focus"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"()"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"getValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:": () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" inputRef.current "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"?"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" inputRef.current.value "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"''"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }))"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"input"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{inputRef} />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"})"})})]})})}),` `,(0,l.jsxs)(e.p,{children:["With ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),", we can now selectively expose the functions we want the parent component to use. This solution improves code clarity and provides a more efficient and controlled external interface."]}),` `,(0,l.jsxs)(e.h2,{id:"-uselayouteffect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-uselayouteffect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F9E9} useLayoutEffect"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useLayoutEffect"})," in React is a powerful hook that allows you to perform synchronous operations after all mutations to the DOM have been completed but before the browser repaints the screen. Imagine the challenge you would face without this hook."]}),` `,(0,l.jsxs)(e.h3,{id:"-challenge-without-uselayouteffect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-challenge-without-uselayouteffect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F914} Challenge Without ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),":"]}),` `,(0,l.jsxs)(e.p,{children:["Imagine a scenario where we want to measure the dimensions of a DOM element and, based on those dimensions, perform certain actions in our functional component ",(0,l.jsx)(e.code,{children:"ResizableBox"}),". Without ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),", we could face issues when making these measurements asynchronously."]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ResizableBox"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"boxRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"boxWidth"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setBoxWidth"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Challenge: How to measure the dimensions of boxRef synchronously?"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Measurements may not be available immediately."})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// This can cause issues if we depend on dimensions to perform actions."})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{boxRef}>{"}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"/* Resizable box content */"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["In this scenario, performing synchronous measurements of the dimensions of ",(0,l.jsx)(e.code,{children:"boxRef"})," is challenging with ",(0,l.jsx)(e.code,{children:"useEffect"})," because the measurements may not be available immediately. This is where ",(0,l.jsx)(e.code,{children:"useLayoutEffect"})," comes into play."]}),` `,(0,l.jsxs)(e.h3,{id:"-solution-with-uselayouteffect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-solution-with-uselayouteffect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Solution with ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),":"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ResizableBox"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"boxRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useRef"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"null"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"boxWidth"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setBoxWidth"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useLayoutEffect"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Use useLayoutEffect to measure the dimensions of boxRef synchronously"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"if"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" (boxRef.current) {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"setBoxWidth"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(boxRef.current.offsetWidth)"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{boxRef}>{"}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"/* Resizable box content */"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["With ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),", we can perform synchronous measurements after the browser has completed all mutations to the DOM but before repainting the screen. This ensures that measurements are available immediately and avoids potential issues related to asynchrony."]}),` `,(0,l.jsxs)(e.h2,{id:"-usedebugvalue",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-usedebugvalue",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F41E} useDebugValue"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useDebugValue"})," in React is a specialized hook designed to enhance the debugging experience by providing additional information about the state of a component. Its main utility is to facilitate component identification in browser development tools."]}),` `,(0,l.jsxs)(e.p,{children:["The basic signature for ",(0,l.jsx)(e.code,{children:"useDebugValue"})," is as follows:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useDebugValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(value)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["When debugging a React application, it's common to face the challenge of quickly identifying the component you're interested in within the browser development tools. Without ",(0,l.jsx)(e.code,{children:"useDebugValue"}),", information about a component can be limited and nonspecific."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["Here\u2019s how the ",(0,l.jsx)(e.code,{children:"useDebugValue"})," hook is used:"]})}),` `,(0,l.jsxs)(e.h3,{id:"1-adding-a-descriptive-name",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#1-adding-a-descriptive-name",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"1. Adding a Descriptive Name:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useDebugValue } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useCustomHook"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"state"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"/* hook logic */"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Provide a descriptive name for easy identification in development tools"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useDebugValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'Custom Hook'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" state"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.h3,{id:"2-displaying-array-content",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#2-displaying-array-content",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"2. Displaying Array Content:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useDebugValue } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useArrayHook"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"array"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"string"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"[]) "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// hook logic"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Show the content of the array in development tools"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useDebugValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(array."}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"join"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"', '"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"/* result */"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.h3,{id:"3-using-state-information",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#3-using-state-information",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"3. Using State Information:"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useState, useDebugValue } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useCounter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setCount"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Use the counter value as information in development tools"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"useDebugValue"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`Counter: ${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"count"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" [count, setCount]"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["By using ",(0,l.jsx)(e.code,{children:"useDebugValue"}),", you can customize the information displayed about your hook or component in development tools, making it easier to identify and debug during development."]}),` `,(0,l.jsxs)(e.h2,{id:"-conclusion",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-conclusion",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F680} Conclusion"]}),` `,(0,l.jsx)(e.p,{children:"In this exploration of React Hooks, from the most basic concepts to the most advanced, I trust you have discovered the fascinating world that these hooks offer to simplify and empower your developments in React. Happy coding! \u2728"}),` `,(0,l.jsxs)(e.h3,{id:"-references",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-references",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F517} References"]}),` `,(0,l.jsxs)(e.ul,{children:[` `,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:"https://react.dev/reference/react",children:"https://react.dev/reference/react"})}),` `,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:"https://youtube.com/playlist?list=PLUofhDIg_38q4D0xNWp7FEHOTcZhjWJ29&si=38k-uyCK8hlf7DIk",children:"https://www.youtube.com/@midulive"})}),` `]}),` `,(0,l.jsxs)(e.h3,{id:"-additional-resources",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-additional-resources",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F310} Additional Resources"]}),` `,(0,l.jsxs)(e.ul,{children:[` `,(0,l.jsx)(e.li,{children:(0,l.jsx)(e.a,{href:"https://blog.logrocket.com/react-hooks-cheat-sheet-solutions-common-problems/",children:"React Hooks Documentation: An Easy to Read Version"})}),` `]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(d,n)})):d(n)}var v=b;return f(x);})(); ;return Component;

Conquering React Hooks: A Comprehensive Guide

View posts by tag