var Component=(()=>{var E=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var h=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})},o=(n,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of h(e))!u.call(n,a)&&a!==r&&c(n,a,{get:()=>e[a],enumerable:!(s=p(e,a))||s.enumerable});return n};var f=(n,e,r)=>(r=n!=null?E(y(n)):{},o(e||!n||!n.__esModule?c(r,"default",{value:n,enumerable:!0}):r,n)),g=n=>o(c({},"__esModule",{value:!0}),n);var i=F((D,d)=>{d.exports=_jsx_runtime});var C={};m(C,{default:()=>v,frontmatter:()=>B});var l=f(i()),B={title:"Conquistando los Hooks en React: Una Gu\xEDa Completa",description:"En este art\xEDculo, revelar\xE9 de manera clara y simplificada c\xF3mo React Hooks puede hacer magia en tus proyectos, tal como me hubiera gustado aprender cuando los descubr\xED.",date:"2024-01-24",url:"/",hero:"/images/blog/posts/cover/crafting-react-hooks.webp",tags:["react","javascript","typescript"],published:!0,lang:"es"};function t(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:"En este art\xEDculo, revelar\xE9 de manera clara y simplificada c\xF3mo React Hooks puede hacer magia en tus proyectos, tal como me hubiera gustado aprender cuando los descubr\xED."}),` `,(0,l.jsxs)(e.h3,{id:"-hooks-la-magia-de-react",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-hooks-la-magia-de-react",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1FA9D} Hooks: La magia de React"]}),` `,(0,l.jsx)(e.p,{children:"En React, los hooks son utilidades que nos permiten ejecutar c\xF3digo arbitrario en nuestros componentes basados en acciones espec\xEDficas. Los hooks proporcionan una forma de reutilizar la l\xF3gica de estado y efectos secundarios en componentes funcionales de manera m\xE1s simple y declarativa."}),` `,(0,l.jsxs)(e.blockquote,{children:[` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.strong,{children:"\u{1F6A8} Importante:"})," Esta gu\xEDa utiliza fragmentos de c\xF3digo ",(0,l.jsx)(e.code,{children:"TypeScript"})," para ilustrar los conceptos. Si no est\xE1s familiarizado con TypeScript, si\xE9ntete libre de ignorar la escritura de tipos en los ejemplos."]}),` `]}),` `,(0,l.jsxs)(e.h2,{id:"-hooks-b\xE1sicos",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-hooks-b\xE1sicos",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F331} Hooks B\xE1sicos"]}),` `,(0,l.jsxs)(e.p,{children:["Esta gu\xEDa de referencia discutir\xE1 todos los hooks disponibles nativamente en React, pero primero, comencemos con los hooks b\xE1sicos de React: ",(0,l.jsx)(e.code,{children:"useState"}),", ",(0,l.jsx)(e.code,{children:"useEffect"})," y ",(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:"Imagen de los hooks b\xE1sicos de React"})}),` `,(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:"Es un hook que permite a los componentes funcionales gestionar y mantener su estado interno. Puedes usarlo para declarar variables de estado y acceder a ellas en tus componentes funcionales."}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["La firma para el hook ",(0,l.jsx)(e.code,{children:"useState"})," es la siguiente:"]})}),` `,(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:["Aqu\xED, ",(0,l.jsx)(e.code,{children:"state"})," y ",(0,l.jsx)(e.code,{children:"setState"})," se refieren al valor del estado y a la funci\xF3n de actualizaci\xF3n devuelta al invocar ",(0,l.jsx)(e.code,{children:"useState"})," con alg\xFAn ",(0,l.jsx)(e.code,{children:"initialState"}),"."]}),` `,(0,l.jsxs)(e.p,{children:["Es importante tener en cuenta que cuando tu componente se renderiza por primera vez e invoca ",(0,l.jsx)(e.code,{children:"useState"}),", el ",(0,l.jsx)(e.code,{children:"initialState"})," es el estado devuelto por ",(0,l.jsx)(e.code,{children:"useState"}),"."]}),` `,(0,l.jsxs)(e.p,{children:["Adem\xE1s, para actualizar el estado, la funci\xF3n de actualizaci\xF3n del estado ",(0,l.jsx)(e.code,{children:"setState"})," debe invocarse con un nuevo valor de estado, como se muestra a continuaci\xF3n:"]}),` `,(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:["Al hacer esto, se encola un nuevo renderizado del componente. ",(0,l.jsx)(e.code,{children:"useState"})," garantiza que el valor del ",(0,l.jsx)(e.code,{children:"state"})," siempre ser\xE1 el m\xE1s reciente despu\xE9s de aplicar actualizaciones."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["Ejemplo de uso de ",(0,l.jsx)(e.code,{children:"useState"})," en un componente React acerca de la tarjeta de seguimiento de 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:"initialFollowing"}),(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:"following"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"setFollowing"}),(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:"(initialFollowing) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// <-- Definici\xF3n"})]}),` `,(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:" following "}),(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:"'Siguiendo'"}),(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:"'Seguir'"})]}),` `,(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:" 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 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:"setFollowing"}),(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:"following) "}),(0,l.jsx)(e.span,{style:{color:"#6A737D"},children:"// Cambiando el estado"})]}),` `,(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:">Dejar de seguir"})]}),` `,(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:["Es un hook de React que permite realizar efectos secundarios en componentes funcionales. Puedes usarlo para ejecutar c\xF3digo en respuesta a cambios en el componente, como hacer solicitudes a API, suscribirte a eventos o actualizar el DOM. ",(0,l.jsx)(e.code,{children:"useEffect"})," recibe una funci\xF3n como argumento y la ejecuta despu\xE9s de que el componente se renderiza o cuando ciertas dependencias cambian."]}),` `,(0,l.jsxs)(e.p,{children:["La firma b\xE1sica de ",(0,l.jsx)(e.code,{children:"useEffect"})," es la siguiente:"]}),` `,(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:["Ejemplo de uso de ",(0,l.jsx)(e.code,{children:"useEffect"})," en un componente React:"]})}),` `,(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_IMAGE_URL_PREFIX"}),(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:"firstThreeWords"}),(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:"`${"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"CAT_IMAGE_URL_PREFIX"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}/cat/says/${"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"firstThreeWords"}),(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_IMAGE_URL_PREFIX"}),(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:"-limpiando-un-efecto",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-limpiando-un-efecto",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F9F9} Limpiando un efecto"]}),` `,(0,l.jsxs)(e.p,{children:["Algun c\xF3digo imperativo necesita ser limpiado para prevenir fugas de memoria. Por ejemplo, las suscripciones deben ser limpiadas, los temporizadores deben ser invalidados, etc. Para hacer esto, se retorna una funci\xF3n desde el callback pasado a ",(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:"apiSubscription"}),(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:"// limpiar la suscripci\xF3n"})]}),` `,(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:"Se garantiza que la funci\xF3n de limpieza se invoque antes de que el componente sea eliminado de la interfaz de usuario."}),` `,(0,l.jsxs)(e.h3,{id:"\uFE0F-evitar-bucles-infinitos",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\uFE0F-evitar-bucles-infinitos",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u26A0\uFE0F Evitar bucles infinitos"]}),` `,(0,l.jsxs)(e.p,{children:["Cuando se utiliza ",(0,l.jsx)(e.code,{children:"useEffect"})," en React, es crucial evitar bucles infinitos que pueden surgir de configuraciones incorrectas del efecto. Un error com\xFAn es modificar el estado dentro del cuerpo del efecto de una manera que desencadene renderizaciones infinitas."]}),` `,(0,l.jsxs)(e.blockquote,{children:[` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.strong,{children:"Causa com\xFAn de bucles infinitos:"})," Modificaci\xF3n directa del estado"]}),` `]}),` `,(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:"// Incorrecto: Modificar el estado dentro del cuerpo del efecto"})]}),` `,(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:"setCounter"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(counter "}),(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:"}, [counter])"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsx)(e.p,{children:"Este ejemplo provoca un bucle infinito al actualizar el estado dentro del efecto, desencadenando nuevas renderizaciones y reejecutando el efecto."}),` `,(0,l.jsxs)(e.h3,{id:"-soluci\xF3n",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-soluci\xF3n",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Soluci\xF3n"]}),` `,(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:"// Correcto: Usa el callback the setCount para actualizar el estado bas\xE1ndo en el estado anterior."})]}),` `,(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:"// Esto asegura que la actualizaci\xF3n del estado no desencadene un bucle infinito."})]}),` `,(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:["Evita bucles infinitos asegur\xE1ndote de que las dependencias en el array de dependencias del ",(0,l.jsx)(e.code,{children:"useEffect"})," son estables y no cambian dentro del cuerpo del efecto. En este caso, al utilizar el callback de ",(0,l.jsx)(e.code,{children:"setCount"})," para actualizar el estado bas\xE1ndose en el estado anterior, evitamos el bucle infinito."]}),` `,(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:["El problema que resuelve ",(0,l.jsx)(e.code,{children:"useContext"})," radica en la necesidad de pasar datos a trav\xE9s de la jerarqu\xEDa de componentes sin recurrir al prop drilling, que es cuando se pasan props manualmente a trav\xE9s de varios niveles de componentes. Este enfoque puede volverse engorroso e impr\xE1ctico a medida que la aplicaci\xF3n crece, ya que cada componente intermedio tiene que transmitir las props, generando un c\xF3digo menos limpio y propenso a errores."]}),` `,(0,l.jsxs)(e.h3,{id:"-prop-drilling-el-desaf\xEDo",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-prop-drilling-el-desaf\xEDo",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u274C Prop Drilling: El Desaf\xEDo"]}),` `,(0,l.jsxs)(e.p,{children:["Imagina un escenario en el que tenemos un ",(0,l.jsx)(e.code,{children:"ComponentA"})," que necesita pasar datos a ",(0,l.jsx)(e.code,{children:"ComponentD"}),". El prop drilling tradicional implicar\xEDa pasar las props a trav\xE9s de todos los componentes intermedios, incluso si ",(0,l.jsx)(e.code,{children:"ComponentB"})," y ",(0,l.jsx)(e.code,{children:"ComponentC"})," no necesitan esos datos."]}),` `,(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:"// Todo para usar el dataForD aqu\xED"})]}),` `,(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:"Este proceso, conocido como prop drilling, puede volverse inmanejable y complicado a medida que se agregan m\xE1s componentes a la jerarqu\xEDa."}),` `,(0,l.jsxs)(e.h3,{id:"-soluci\xF3n-usecontext-al-rescate",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-soluci\xF3n-usecontext-al-rescate",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Soluci\xF3n: \xA1",(0,l.jsx)(e.code,{children:"useContext"})," al Rescate!"]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useContext"})," simplifica en gran medida esta tarea al permitirnos crear y consumir un contexto sin pasar manualmente las props a trav\xE9s de cada componente. Primero, creamos un contexto usando ",(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.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["Luego, usamos el componente ",(0,l.jsx)(e.code,{children:"Provider"})," para envolver nuestro \xE1rbol de componentes con el valor deseado:"]}),` `,(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:"/* Componentes anidados aqu\xED */"}),(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:["Finalmente, en cualquier componente dentro de este contexto, podemos usar ",(0,l.jsx)(e.code,{children:"useContext"})," para acceder a los datos sin pasar manualmente las 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}>Haz clic aqu\xED"})]}),` `,(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.jsxs)(e.p,{children:["Ten en cuenta que el valor pasado a ",(0,l.jsx)(e.code,{children:"useContext"})," debe ser el objeto de contexto, es decir, el valor devuelto al invocar ",(0,l.jsx)(e.code,{children:"React.createContext"}),", no ",(0,l.jsx)(e.code,{children:"ContextObject.Provider"})," o ",(0,l.jsx)(e.code,{children:"ContextObject.Consumer"}),"."]}),` `]}),` `,(0,l.jsxs)(e.p,{children:["Esta soluci\xF3n evita el engorroso prop drilling y proporciona una forma m\xE1s limpia y eficiente de compartir datos entre componentes en una aplicaci\xF3n de React. ",(0,l.jsx)(e.code,{children:"useContext"})," hace que la gesti\xF3n de datos sea m\xE1s elegante y f\xE1cil de mantener."]}),` `,(0,l.jsx)(e.p,{children:"\xA1Adi\xF3s, prop drilling! \u{1F44B}"}),` `,(0,l.jsxs)(e.h2,{id:"-hooks-adicionales",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-hooks-adicionales",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F31F} Hooks Adicionales"]}),` `,(0,l.jsx)(e.p,{children:"Los siguientes hooks son variantes de los hooks b\xE1sicos discutidos en las secciones anteriores. Si eres nuevo en los hooks, no te molestes en aprender estos por ahora. Solo son necesarios para casos espec\xEDficos."}),` `,(0,l.jsx)(e.p,{children:(0,l.jsx)(e.img,{src:"https://fraineralex.dev/images/blog/posts/content/additional-hooks.webp",alt:"Imagen de hooks adicionales de React"})}),` `,(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"})," en React es un hook que facilita la creaci\xF3n de referencias mutables. A diferencia de ",(0,l.jsx)(e.code,{children:"useState"}),", ",(0,l.jsx)(e.code,{children:"useRef"})," no desencadena la actualizaci\xF3n de componentes cuando su valor cambia, convirti\xE9ndolo en una herramienta poderosa para almacenar datos que no afectan directamente la interfaz de usuario."]}),` `,(0,l.jsxs)(e.p,{children:["As\xED es como se utiliza el hook\xA0",(0,l.jsx)(e.code,{children:"useRef"}),":"]}),` `,(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:"-desaf\xEDo",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-desaf\xEDo",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F977}\u{1F3FB} Desaf\xEDo"]}),` `,(0,l.jsxs)(e.p,{children:["El problema que resuelve ",(0,l.jsx)(e.code,{children:"useRef"})," se hace evidente cuando necesitamos actualizar valores sin activar una actualizaci\xF3n visual del componente. Para ilustrar esto, consideremos un escenario de b\xFAsqueda de pel\xEDculas:"]}),` `,(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 Esto es una mala pr\xE1ctica porque estamos obteniendo"})]}),` `,(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:"// las pel\xEDculas y volviendo a renderizar el componente"})]}),` `,(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:"// incluso si la b\xFAsqueda es la misma que la anterior."})]}),` `,(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:["En este caso, usar ",(0,l.jsx)(e.code,{children:"useState"})," para el t\xE9rmino de b\xFAsqueda provoca renderizaciones innecesarias cada vez que cambia el t\xE9rmino de b\xFAsqueda. Aqu\xED es donde ",(0,l.jsx)(e.code,{children:"useRef"})," se convierte en una soluci\xF3n eficiente al permitirnos actualizar ",(0,l.jsx)(e.code,{children:"search"})," sin afectar la interfaz de usuario:"]}),` `,(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 una 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 Si la b\xFAsqueda actual es igual a la anterior, retorna"})]}),` `,(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:["Con esta implementaci\xF3n, ",(0,l.jsx)(e.code,{children:"useRef"})," ayuda a gestionar el valor de ",(0,l.jsx)(e.code,{children:"search"})," sin causar actualizaciones visuales no deseadas, mejorando la eficiencia y la experiencia del usuario."]}),` `,(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:["El hook ",(0,l.jsx)(e.code,{children:"useMemo"})," en React es una herramienta poderosa para optimizar el rendimiento al memorizar el resultado de una funci\xF3n. Su prop\xF3sito principal es evitar c\xE1lculos innecesarios, reutilizando el valor calculado anteriormente si las dependencias no han cambiado."]}),` `,(0,l.jsxs)(e.p,{children:["As\xED es como se utiliza el hook\xA0",(0,l.jsx)(e.code,{children:"useMemo"}),":"]}),` `,(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 de lectura`"})]}),` `,(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:"// solo recalcular si cambia el texto"})]})]})})}),` `,(0,l.jsxs)(e.p,{children:["El problema que aborda ",(0,l.jsx)(e.code,{children:"useMemo"})," se hace evidente cuando necesitamos realizar c\xE1lculos costosos en un componente, pero esos c\xE1lculos no son necesarios cada vez que el componente se renderiza. Tomemos el ejemplo del componente ",(0,l.jsx)(e.code,{children:"Counter"}),":"]}),` `,(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:"// Costoso c\xE1lculo realizado en cada renderizaci\xF3n"})]}),` `,(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:["En este caso, el valor doble se recalcula en cada renderizaci\xF3n, incluso si ",(0,l.jsx)(e.code,{children:"count"})," no ha cambiado. ",(0,l.jsx)(e.code,{children:"useMemo"})," resuelve esto al memorizar el resultado del c\xE1lculo solo cuando las dependencias, en este caso, la propiedad ",(0,l.jsx)(e.code,{children:"count"}),", han cambiado:"]}),` `,(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:["Con ",(0,l.jsx)(e.code,{children:"useMemo"}),", si la propiedad ",(0,l.jsx)(e.code,{children:"count"})," no ha cambiado, se evita el rec\xE1lculo del doble y se reutiliza el valor calculado anteriormente. Esto mejora significativamente la eficiencia del componente, especialmente en situaciones donde los c\xE1lculos son m\xE1s intensivos en recursos."]}),` `,(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:["El hook ",(0,l.jsx)(e.code,{children:"useCallback"})," en React proporciona una forma de memorizar funciones. La principal ventaja es evitar la creaci\xF3n de nuevas funciones en cada renderizaci\xF3n, devolviendo la funci\xF3n memorizada previamente si las dependencias no han cambiado."]}),` `,(0,l.jsxs)(e.p,{children:["As\xED es como se utiliza el hook\xA0",(0,l.jsx)(e.code,{children:"useCallback"}),":"]}),` `,(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:"callbackMemorizado"}),(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, arrayDependencia)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["El problema que aborda ",(0,l.jsx)(e.code,{children:"useCallback"})," se hace evidente cuando necesitamos pasar funciones a componentes hijos y queremos evitar la creaci\xF3n de nuevas instancias de esas funciones en cada renderizaci\xF3n. Tomemos el ejemplo del componente ",(0,l.jsx)(e.code,{children:"Counter"}),":"]}),` `,(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:["En este caso, ",(0,l.jsx)(e.code,{children:"handleIncrement"})," se recrea en cada renderizaci\xF3n, lo cual no es eficiente, especialmente si ",(0,l.jsx)(e.code,{children:"onIncrement"})," y ",(0,l.jsx)(e.code,{children:"count"})," no han cambiado. ",(0,l.jsx)(e.code,{children:"useCallback"})," aborda esto al memorizar la funci\xF3n solo cuando cambian las dependencias:"]}),` `,(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.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [count, onIncrement"})}),` `,(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:"// solo recrear si count u onIncrement cambian"})]}),` `,(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:["Con ",(0,l.jsx)(e.code,{children:"useCallback"}),", si ",(0,l.jsx)(e.code,{children:"count"})," o ",(0,l.jsx)(e.code,{children:"onIncrement"})," no han cambiado, se evita la creaci\xF3n de una nueva funci\xF3n y se reutiliza la funci\xF3n calculada previamente. Esto mejora la eficiencia y contribuye a un rendimiento del componente m\xE1s \xF3ptimo."]}),` `,(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"})," es un hook de React dise\xF1ado para generar identificadores \xFAnicos, ideales para asignarlos a atributos de etiquetas HTML. Esta pr\xE1ctica resulta especialmente \xFAtil para mejorar la accesibilidad al establecer relaciones espec\xEDficas entre elementos."]}),` `,(0,l.jsxs)(e.p,{children:["As\xED es como se utiliza el hook ",(0,l.jsx)(e.code,{children:"useId"}),":"]}),` `,(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:"A continuaci\xF3n, el ID generado se utiliza en diferentes atributos:"}),` `,(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.jsxs)(e.p,{children:["El problema que aborda ",(0,l.jsx)(e.code,{children:"useId"})," surge cuando necesitamos asignar identificadores \xFAnicos a elementos HTML, especialmente en situaciones en las que un componente puede aparecer m\xFAltiples veces en la pantalla. Tomemos el ejemplo del componente ",(0,l.jsx)(e.code,{children:"PasswordField"}),":"]}),` `,(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:" Contrase\xF1a:"})}),` `,(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:" La contrase\xF1a debe tener 18 caracteres y contener caracteres especiales."})}),` `,(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.jsxs)(e.p,{children:["En este caso, ",(0,l.jsx)(e.code,{children:"useId"})," se utiliza para generar un ID \xFAnico (",(0,l.jsx)(e.code,{children:"passwordHintId"}),") que se asigna tanto al atributo ",(0,l.jsx)(e.code,{children:"aria-describedby"})," del input como al ",(0,l.jsx)(e.code,{children:"id"})," del p\xE1rrafo. Esto asegura que aunque ",(0,l.jsx)(e.code,{children:"PasswordField"})," aparezca varias veces en la pantalla, los IDs generados no entrar\xE1n en conflicto."]}),` `,(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:">Elegir contrase\xF1a"})]}),` `,(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:">Confirmar contrase\xF1a"})]}),` `,(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.jsxs)(e.p,{children:["En el componente ",(0,l.jsx)(e.code,{children:"App"}),", donde se usa ",(0,l.jsx)(e.code,{children:"PasswordField"})," dos veces, ",(0,l.jsx)(e.code,{children:"useId"})," asegura que los identificadores generados autom\xE1ticamente eviten duplicados y proporcionen una soluci\xF3n robusta para asignar IDs \xFAnicos en contextos repetidos. Esto contribuye a mejorar la accesibilidad y consistencia en la aplicaci\xF3n."]}),` `,(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"})," es un hook de React dise\xF1ado para gestionar el estado de un componente mediante un enfoque basado en acciones y reducciones, similar al patr\xF3n utilizado en Redux. Este hook se prefiere sobre ",(0,l.jsx)(e.code,{children:"useState"})," cuando el estado de un componente es m\xE1s complejo o cuando las actualizaciones de estado dependen del estado anterior o de acciones previas."]}),` `,(0,l.jsxs)(e.p,{children:[(0,l.jsx)(e.code,{children:"useReducer"})," toma dos argumentos: una funci\xF3n de reducci\xF3n y el estado inicial. La funci\xF3n de reducci\xF3n recibe dos argumentos: el estado actual y una acci\xF3n que describe c\xF3mo deber\xEDa cambiar el estado. La funci\xF3n de reducci\xF3n devuelve el nuevo estado."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["As\xED es como se utiliza el hook ",(0,l.jsx)(e.code,{children:"useReducer"}),":"]})}),` `,(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, argumentoInicial, init)"})]})})})}),` `,(0,l.jsxs)(e.p,{children:["El problema que aborda ",(0,l.jsx)(e.code,{children:"useReducer"})," surge cuando el estado de un componente se vuelve m\xE1s complejo y las actualizaciones de estado dependen de m\xFAltiples factores o acciones. Tomemos el ejemplo del componente ",(0,l.jsx)(e.code,{children:"Counter"}),":"]}),` `,(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:">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,{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}>Decrementar"})]}),` `,(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:["En este ejemplo, usamos ",(0,l.jsx)(e.code,{children:"useState"})," para gestionar el estado del contador. Si bien esto puede funcionar para casos simples, a medida que la l\xF3gica del estado se vuelve m\xE1s compleja o depende de acciones previas, el c\xF3digo puede volverse m\xE1s dif\xEDcil de mantener. ",(0,l.jsx)(e.code,{children:"useReducer"})," proporciona una estructura m\xE1s organizada y una soluci\xF3n m\xE1s escalable para manejar estados y acciones complejas en situaciones donde el c\xF3digo podr\xEDa volverse confuso usando solo ",(0,l.jsx)(e.code,{children:"useState"}),". Abordar\xEDamos este problema con ",(0,l.jsx)(e.code,{children:"useReducer"})," de la siguiente manera:"]}),` `,(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 la funci\xF3n de reducci\xF3n"})}),` `,(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:"'incrementar'"}),(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:"'decrementar'"}),(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:"// Usa useReducer para gestionar el estado del contador"})]}),` `,(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:">Contador: {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:"'incrementar'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })}>Incrementar"})]}),` `,(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:"'decrementar'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" })}>Decrementar"})]}),` `,(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.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"})," en React es una herramienta \xFAtil cuando necesitas controlar y personalizar la interfaz externa de un componente funcional, especialmente al trabajar con refs. Imagina el desaf\xEDo al que te enfrentar\xEDas sin este gancho."]}),` `,(0,l.jsxs)(e.h3,{id:"-desaf\xEDo-sin-useimperativehandle",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-desaf\xEDo-sin-useimperativehandle",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F914} Desaf\xEDo Sin ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),":"]}),` `,(0,l.jsxs)(e.p,{children:["Supongamos que tenemos un componente funcional llamado ",(0,l.jsx)(e.code,{children:"FancyInput"})," que encapsula un campo de texto. Queremos que el componente padre acceda y manipule el valor del campo directamente y tambi\xE9n active el enfoque en ese campo. Sin ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),", podr\xEDamos terminar con un c\xF3digo menos eficiente y propenso a errores."]}),` `,(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:"/* Desaf\xEDo: \xBFC\xF3mo exponer el m\xE9todo `focusInput` al componente padre? */"}),(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:["En este escenario, exponer el m\xE9todo ",(0,l.jsx)(e.code,{children:"focusInput"})," al componente padre ser\xEDa una tarea desafiante e inelegante. Aqu\xED es donde entra en juego ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),"."]}),` `,(0,l.jsxs)(e.h3,{id:"-soluci\xF3n-con-useimperativehandle",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-soluci\xF3n-con-useimperativehandle",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Soluci\xF3n con ",(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:"// Usa useImperativeHandle para personalizar la interfaz externa"})]}),` `,(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.jsx)(e.span,{"data-line":"",children:" "})]})})}),` `,(0,l.jsxs)(e.p,{children:["Con ",(0,l.jsx)(e.code,{children:"useImperativeHandle"}),", ahora podemos exponer selectivamente las funciones que queremos que el componente padre utilice. Esta soluci\xF3n mejora la claridad del c\xF3digo y proporciona una interfaz externa m\xE1s eficiente y controlada."]}),` `,(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"})," en React es un gancho potente que te permite realizar operaciones s\xEDncronas despu\xE9s de que se hayan completado todas las mutaciones en el DOM, pero antes de que el navegador repinte la pantalla. Imagina el desaf\xEDo al que te enfrentar\xEDas sin este gancho."]}),` `,(0,l.jsxs)(e.h3,{id:"-desaf\xEDo-sin-uselayouteffect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-desaf\xEDo-sin-uselayouteffect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F914} Desaf\xEDo Sin ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),":"]}),` `,(0,l.jsxs)(e.p,{children:["Imagina un escenario en el que queremos medir las dimensiones de un elemento DOM y, bas\xE1ndonos en esas dimensiones, realizar ciertas acciones en nuestro componente funcional ",(0,l.jsx)(e.code,{children:"ResizableBox"}),". Sin ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),", podr\xEDamos tener problemas al realizar estas mediciones de manera as\xEDncrona."]}),` `,(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:"// Desaf\xEDo: \xBFC\xF3mo medir las dimensiones de boxRef de manera s\xEDncrona?"})]}),` `,(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:"// Las mediciones pueden no estar disponibles de inmediato."})]}),` `,(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:"// Esto puede causar problemas si dependemos de las dimensiones para realizar acciones."})]}),` `,(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:"/* Contenido de la caja redimensionable */"}),(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:["En este escenario, realizar mediciones s\xEDncronas de las dimensiones de ",(0,l.jsx)(e.code,{children:"boxRef"})," es desafiante con ",(0,l.jsx)(e.code,{children:"useEffect"})," porque las mediciones pueden no estar disponibles de inmediato. Aqu\xED es donde entra en juego ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),"."]}),` `,(0,l.jsxs)(e.h3,{id:"-soluci\xF3n-con-uselayouteffect",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-soluci\xF3n-con-uselayouteffect",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u2705 Soluci\xF3n con ",(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:"// Usa useLayoutEffect para medir las dimensiones de boxRef de manera s\xEDncrona"})]}),` `,(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:"/* Contenido de la caja redimensionable */"}),(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:["Con ",(0,l.jsx)(e.code,{children:"useLayoutEffect"}),", podemos realizar mediciones s\xEDncronas despu\xE9s de que el navegador haya completado todas las mutaciones en el DOM pero antes de repintar la pantalla. Esto asegura que las mediciones est\xE9n disponibles de inmediato y evita problemas potenciales relacionados con la asincron\xEDa."]}),` `,(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"})," en React es un gancho especializado dise\xF1ado para mejorar la experiencia de depuraci\xF3n al proporcionar informaci\xF3n adicional sobre el estado de un componente. Su principal utilidad es facilitar la identificaci\xF3n de componentes en las herramientas de desarrollo del navegador."]}),` `,(0,l.jsxs)(e.p,{children:["La firma b\xE1sica para ",(0,l.jsx)(e.code,{children:"useDebugValue"})," es la siguiente:"]}),` `,(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:["Al depurar una aplicaci\xF3n de React, es com\xFAn enfrentarse al desaf\xEDo de identificar r\xE1pidamente el componente de inter\xE9s dentro de las herramientas de desarrollo del navegador. Sin ",(0,l.jsx)(e.code,{children:"useDebugValue"}),", la informaci\xF3n sobre un componente puede ser limitada y no espec\xEDfica."]}),` `,(0,l.jsx)(e.p,{children:(0,l.jsxs)(e.strong,{children:["As\xED es c\xF3mo se usa el gancho ",(0,l.jsx)(e.code,{children:"useDebugValue"}),":"]})}),` `,(0,l.jsxs)(e.h3,{id:"1-agregar-un-nombre-descriptivo",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#1-agregar-un-nombre-descriptivo",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"1. Agregar un Nombre Descriptivo:"]}),` `,(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:"/* l\xF3gica del gancho */"})]}),` `,(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:"// Proporcionar un nombre descriptivo para facilitar la identificaci\xF3n en las herramientas de desarrollo"})]}),` `,(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-mostrar-contenido-de-un-array",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#2-mostrar-contenido-de-un-array",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"2. Mostrar Contenido de un Array:"]}),` `,(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:"// l\xF3gica del gancho"})]}),` `,(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:"// Mostrar el contenido del array en las herramientas de desarrollo"})]}),` `,(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:"/* resultado */"})]}),` `,(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-utilizar-informaci\xF3n-del-estado",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#3-utilizar-informaci\xF3n-del-estado",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"3. Utilizar Informaci\xF3n del Estado:"]}),` `,(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:"// Utilizar el valor del contador como informaci\xF3n en las herramientas de desarrollo"})]}),` `,(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:"`Contador: ${"}),(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:["Al usar ",(0,l.jsx)(e.code,{children:"useDebugValue"}),", puedes personalizar la informaci\xF3n que se muestra sobre tu gancho o componente en las herramientas de desarrollo, facilitando su identificaci\xF3n y depuraci\xF3n durante el desarrollo."]}),` `,(0,l.jsxs)(e.h2,{id:"-conclusi\xF3n",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-conclusi\xF3n",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F680} Conclusi\xF3n"]}),` `,(0,l.jsx)(e.p,{children:"En esta exploraci\xF3n de React Hooks, desde los conceptos m\xE1s b\xE1sicos hasta los m\xE1s avanzados, conf\xEDo en que hayas descubierto el fascinante mundo que estos ganchos ofrecen para simplificar y potenciar tus desarrollos en React. \xA1Feliz codificaci\xF3n! \u2728"}),` `,(0,l.jsxs)(e.h3,{id:"-referencias",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-referencias",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F517} Referencias"]}),` `,(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:"-recursos-adicionales",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#-recursos-adicionales",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u{1F310} Recursos Adicionales"]}),` `,(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:"Documentaci\xF3n de React Hooks: Una versi\xF3n f\xE1cil de leer"})}),` `]})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(t,n)})):t(n)}var v=b;return g(C);})(); ;return Component;

Conquistando los Hooks en React: Una Guía Completa

Ver artículos por tema