ttooks son Funciones ue te permiien “enganchar” el estado de React y el cido de vida desde compoventes Fuucionales . Los Hooks uo Funcionan dentro de las clases, te permiten usar React Sin Clases. React proporciona algunos Hooks (ucor= porados como aiaiikan + use Errect + ‘Use Context!_5 Durante el renderizado iwictal, el estado devvelto (Gtate)es el mismo que el valor pasado como primer arqumento _, La Funcich setState se usa para ‘actu lizar el estado. Acepta Un wvevo Valor de estado y sttia an la cola Wa wvena rendenzacisu del Comvonente. sel hate (nen State) j Eu las renderizaciones siguientes vel priwer valor 1 e al estado wis dewelto por sera Siew Irecienty despuds de aplicar las actudlizaciones, A El arqumenno “iwihalState es el estado vhlizady durante el render wicial. En Tewderizados posteriores, se tquora.GOK CHARS ~~ class Contador extends React Component £ Constructor (props) § Super (props) ; this state =f Count :0 7; * Fender () § Teturn (

Hiciste click {Hits . state.couut)Hurces

tins set State (f count « this state-eouut +4 3)3> Haz click)

Wicisle cies Joounty veces < button, onChek = §() = set Count(eount +4)3>Waz click | <[bathon>

i ) 2 Ss = Tuportamos use Stale que vonpemle mantener un Estado local EW UW CoMmPONeNte FUNCIORAl . = Dentro del componente Contador declatamos \a Vanable count (quarda el némero de clicks) \lamando A hook usestate - La Inicializamos en cero pasando (0) como Unico argumento a useStale. “SetCount nos permite actualizar el count. ¢ Quando el usuano hace click , Vlamamos a ‘SekCount con un nvevo valor. (React actuali2a a componente Cartador Pasdndde el wuevo valor de count.Al usar este Hook, le estamos Cndicando a React que el Componente tiene que hacer algo después de renderizarse. React recordard la Funcidn que le hemos pasado (hos TeFerimos a ella como wvestro “ececto") y la llamard mas tarcle despues de actvalizar el DOM. —useFrrect equivale a (la combrnacidu’ de : te Component Dial Mount, “# component Did Update, 3 Compowent Will Unmount Qe paygeea clases = class friendStaturWithCounter extends React. Component ai Constrvctor (gropsy 5 Super (Props) Chis state = 5 tsOnline: woll 2; Ahis hawdle Status Change “this handlestatuschawge -bona(this); td Mout )£ . Cy & UES State count os SraRhANsubenbe Wncoa Stame Cc! Meee Chis. props .enend.t, Chis Wandle Status Change); g “component Did Update () £ dowument Ante = "Cliekeaste 4 this stale count} veces’; 7 “component With Unmouat() £ Chat APL. unsubseribe Frominend Status ( Khis. prope erie. td, this. handleStatus Change );, 3 hanaleStalus Change (status) { ds SetState ({ (sOnlme * status. isOnline ?)+) er we eine ana return ‘Loading ..."; 3 return this state. tsOnlme > ‘Online’ - 'Oeelne’ 5 3 e tEw el EJEmelo QntENor SE aiadig UNA FUUCKonaltdad : Actualizar £1 Htulo del atumento con un Mmensaye PEcsonalizado yvoe imcluye El NoMEFO de clicks. Esta Voaica se divide enne component Did Nowirt 1 omPeceoeRdaeh la \ogica de \a suscrsecion (Aenemos un modulo Chat ati gue nos vermite susosbimas pata saber St un amigo esta conectodc) SE terarte EWtE 1 SE susceipe ° SE CANCELA LA ‘Susery Pardes i vented aeuns j Puedes usar el Hook de erect mas De Und vE2! Esto wos termite separar la lqica que ho eftd relaciouada eu diferewnes EFecrov t ar pears Funchou tri bir WithCounte (regs) § Const [Couut set Count] + useState(o), fuse Errect (CY => 5 : dotunent tle = ‘Chickeaste $6 county veces's wy Const (isOwline, set hOnline |= useState(noll) ; (Weteredt (() =o 1 Funchon handleStatucCnange(statur) { Sets Onlue (statue. isOnline) , 2 Chot Att .subpseribe WoFriend Statur (progs.tviend.td,, handle Stalur Change); return () =? £ Chat Pl onguccribe Toknend Status (props-Friend.id , handle Starr Omang) y ny Wesae : o const value = useCovlext’ (MyContext); Acepta UN OBSETO DE coNTExTO (¢l valor dewuelto de React. createContext )¥ DEVUEIVE EL ULOR DE CONTEXTO AeTUAL. EL VALOR ACTUAL DEL CONTEXTO ES DETERMINADO Por LA PRoPiEDAD valve vel rc ASCENDENTEMENTE MAS CEPCANO EN EL ARBOR AL COMPONENTE QuE HACE LA LLAMADA. Cuando el USCEUdEMTE MENTE Wide CErcaNo east dibol ce actualiza, el Yok uctiva una vewderitacion won ak Value was reciente del contexte ee’ A ese Proveedor {No olvides gve Ol arquitento enviado a useCowtert debe ser el objeto del contexto en Gi mismo: useContert (Mytontext)) | APuseReducer: | ~ const (state, dispatch] = use Reducer (PEducer, unitralfeg Int); Es una altermativa a useState . Acerta wn reducer de - Ang (state ,actiou) => wewState \ dewelve el estado dckual Ewtarejado con uv wtodo dispatch. abuse Calitack : | Const memovzedCallback = use Callback ( Qet do Something (a5) 55, Ta,bI, ° 5 Ue Pasa uw callback en linea y Un arreglo de derenden® Cis . UsECalI back devolverd una vemsidn WeEMoriz0da de\ callback que Solo Cambia Si una de las depey= Gencias ha Cambiado - 4raf uselemo: t const mernoized\klve- usetemo(() > compute Expense Valve (a,b), j Ca,b2); Dewelve YM valor memorizado . Pasa una Funeron de “erear” ¥ UM drreglo de defendencias. “usetlemo solo velverd a caleular el valor memorizado wando wo de las derendencias haya cambiado | Lo Funcidn usetlemo se Exeuta durante cl rendevizado- 1 ¥ useRer: | Const cerContainer = use Re¢ (imiiallWdloe), “UseREe devudlve un dbjeto rer wutable euya propedad . Wusrend so iwielaliza eon ob atqumento pasado (iustralValve) El objeto cevvelto Se wantenard peisistewte durante la vida completa del Componenie,Los hooks son Funciones de JavaSerirt,, pero wecesitar Seqvir dos req las euando los uses. olllama a los Hooks solo en el nivel surerion =“ No \ames Hooks dentro dé cidos, condicional et o Funciones ani dadas . Srouendo Etta (Egle CE avequray de que Nos Woks f Namen en el Miso Oden Cada VEL Qué Un Cortfonente SE CENDENTA llama Hooks solo en runciones de React. “ ~ >No ames Hooks desde Funciones Javakript regularer - Siquiende uate egla, Te acequiar de 9 toda la learea del Estado de un oowovenrt FE4 claramenye vinble desde ku cbdign Svenre- Hay un plugin de ESLink Wanado eslunt plugar -react -hocks Wwe rerueszo Estas dos reqlat . Este plugin £3 indlvido por derecto eniCreate React App.