Scribd
Upload
8 views3 pages

How Re Rendering Works With Context

how re rendering works with context

Uploaded by

walidbrakaoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
8 views3 pages

How Re Rendering Works With Context

how re rendering works with context

Uploaded by

walidbrakaoui
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
COUFSEFA | secsinsoue Ea Svamy 2 @ & Wien > Modules > Honterederngrh nth ott < Prout Not > Rendering Lists in React ae How re-rendering works with Context oe In ierescingyou wlan abou the afaut behavor of Reactrederingandinhen cone isu oul ae cover ow preven unecessary top levl vende wh Rasotmamasndhow beets worn a ee JavaScript. You wiles eernhow toile the useama hook to gurantee object ferences dontchange during ino revenderne @ isrbeceecmes Sofa. you hae learned that when component consumes some conten value and the value of ths content Seca ne ‘change, that component reeds. a ‘twat happens with al comaonentsin beeen React nite enous to onl reende the consumers ane rice vi . alls clr reales f props or conte et strate tls pont ith an example ha ues sme content. Imsginethefolouing component structure, where the top lvl companentinjet Cont prover atthe top top (Contexttrovider) > A> B>C OE recor ( dy ® const conponanth = etanpoerte >) fonet componente = () 5 mulls Inthe outemos pp coment ecenderafruhateer reson llmpanent Cempanentl nd Component compone'saeende 2 wal, loving sxe e top (ContantPreviat) > A> BOC Iteome ot your top eel components complexin nature, this could eultin ome performance it Tomiiate ‘site youcan mateusecf he top level AP Rast mano) tyaurcomponentrendersthesameresutgven the me pops you can wrap tin allo Rast amma fos performance boost by memotngthe result. emoitton ts programming tehnige tht szleate performance by caching he eur sue of expenve function calls “Thismeans that React llship rendering the component end reuse the ast endered fat This natal ease for CconeonantA ince it dort reeive ay prope ‘const ConponentA = React neno(() > ) ‘React mero thes the component defiton asa fst argument. An optional second argumentcanbe include yu would eto spel some customs pith ines when th component sould re-ende based on previous © sndcuren prope ‘Aer thai ajusmet youillrevent ny rendering om happening inal Component, Companent ad Canponant ithe App component revendes, const op OT revorn( ptonter.froviars pageant Prvider> »% 2 20 cont Conpmentt = () 0 Convent /95 ‘goede thumb ito wrap the React component ght ae you contest provide ith Rac mama Ines appations, you wl find yourself need f passing aver pieces of deta a content seater than@ singe primitive ikea sng orrumbe, 50 ou be working mas hey with Jaserpt objets, Now, cording Rest contr, llconeumeretnatare descendant a provderllreender whenever providersvalu prop changes Lets go trough he fllowing cenare ultuponthe previous example, whee the conertalue tat ets injected Isdetned aan abject led wana uth wo properties, and'bbenghoth sings. Ao, Campanian is ow @ ceneumerf cote, 0 me the provide value prop changes, mona wren 2 cont opp 2 0 2 ton val = fa OM, Be yD 3 | ure 1 ppconene Provider vatvetvalie> S_aapptomere Provitens 2d Soh 28 cons Cononenth = React.nen(() *> ceomponente 3p 22 Sons conporanse 2) 33 Cat coneertlon = vestontent Arcane} Imagine tat the value prop fom the proiderchangesto (az Shela’, Be bye! feat happens the sequence of rerenders wouldbe: top (Contantrrovsaar) > 6 “That al fine and expected, bthat noulshappen fe hop component revendersforanytherresson andthe roider value doesn'tchange tal beng il (az SRE! Be Saye"? remaybea suprisetoyouto fad out thatthe squenceof renders thesame a betore: nop (Contextroviaar) > 6 ren tough the provider value docenteer to chang, Compan es e-endered “Toundertand whats happening. you needa remember thtinIaScrp, the below ase ito fa OBA! Be Shyer) tee as OR, be Sbxe"b “Thats because objet comparionin JeaScipts cone by elerence. Every mea nen recenderhappensia the ‘op companent,s new instanceof the vata cet rete,eulng inthe roid pelrmingacampsrion psn previous valve and determining thatitha change, hence informing allcontes conser that hey shouldrerender “This pobemcan be eae by sing the iatana hook rom Reet aslo 2 const apo #09 ¢ 4 eonet value + usenona(() => (6D), [ay 8D)5 7 Sapconene provider vabuesfvabue : ‘opener I> 5 efappconere Providers 2 oo 33 cons Conponanth = Reat.man(() =>

You might also like