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
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 paygeea 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
tEw 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
aeuns
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
Wesae : 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)) | APuseReducer: |
~ 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 - 4raf 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.