Cover Image for Nji udhëzues i plotë i useEffect

Nji udhëzues i plotë i useEffect

Ky postim eshte marr nga: https://overreacted.io/

Ti i ke shkru do komponenta me Hooks. Nashta edhe naj small app. Ne pergjithesi je i knaqur. Ndihesh rehat me API (e react) dhe i ke msu disa trika gjate kesaj kohe. Ti bile ke shkru edhe custom hooks, me extract logjike qe perseritet (300 rresha shkun!), edhe je fry para kolegeve. "Bravo bre" ta kan kthy.

Por ndonjëherë kur përdorni useEffect, pjesët nuk përshtaten plotësisht së bashku. E ki një ndjenje se diçka spo din. Duket e ngjashme me class lifecycles ... por a është me të vërtetë?

Ne fund e gjeni veten duke bërë pyetje si:

  • 🤔 Qysh muj me repliku componentDidMount me useEffect?
  • 🤔 Qysh me fetch data brenda useEffect? Cka o []?
  • 🤔 A duhet me specifiku functions si dependency te effect a jo?
  • 🤔 Pse kanihere qelloj me ni infinite refetching loop?
  • 🤔 Pse kanihere e kam old state ose old prop value brenda effect tim?

TLDR

Qe ni TLDR e shpejt, ski nevoje me lexu krejt postin. Nese diqka s'tu doket ok, scroll down deri sa te gjen diqka relevante.

Qysh muj me repliku componentDidMount me useEffect?

Edhe pse ti mundesh me perdor useEffect(fn, []), nuk osht krejt i njejt. Ndryshe prej componentDidMount, useEffect i kap props dhe state. Keshtu qe edhe brenda callbacks, ti ke me pa initial props and state. Nese don me pa latest diqka duhet me shkru me nje ref. Por zakonisht ka menyra me te thjeshta me strukturu kodin, keshtu qe nuk ke nevoje me perdor ref. Mbaje ne mend qe mental model per effects osht i ndryshem prej componentDidMount edhe other lifecycles, mu mundu me i barazu ose me gjet ngjajshmeri veq ta pshtillin. Per me qene ma produktiv, duhet mu mundu me "mendu me efekte", se mental model i efekteve osht ma afer te zbatimit te sinkronizimit (implementing synchronization) sesa duke u ndikuar prej lifecycle events.

Qysh me fetch data brenda useEffect? Cka o []?

Ky postim osht ni fillim i mire se qysh me bo data fetching me useEffect. Sigurohu qe e ke lexu deri ne fund. [] nenkupton qe effect nuk perdor asnje value qe nuk merr pjese ne React data flow, dhe per kete arsye eshte i sigurt te apkikohet vetem njeher. Po ashtu osht burim i zakonshëm i bugs kur vlerat ne te aktualisht perdoren (dmth: props ose state kur perdoren brenda useEffect). Ti duhet m'i msu disa strategji (si fillim useReducer dhe useCallback), te cilat e largojn nevojen per dependency sesa ne menyre te gabuar mi shtu ato (omitting it).

A duhet me specifiku functions si dependency te effect a jo?

Rekomandohet me hoist functions per funksionet qe nuk kan nevoje per props ose state te atij komponenti jasht komponentit, edhe mi shtu brenda veq qato funksione qe perodren prej effect ne qat effect. Nese edhe pas kesaj effect juaj perfundon duke i perdor funksionet brenda render scope ( perfshire edhe funksionet qe vjin nga props), atehere shtoni ato funksione brenda useCallback, dhe keshtu mund ta perserisni procesin siq e shihni te nevojshme. Pse ka rendesi kjo? Se funksionet munden me "pa(shohin)" values prej props dhe state -- keshtu qe mund te marrin pjese ne data flow.

Pse kanihere qelloj me ni infinite refetching loop?

Kjo mundet me ndodh kur je tu bo data fetching brenda ni effect, pa parametrin e dyt te dependencies. Pa te, effects run pas cdo render -- dhe setting the state do te trigger the effects prap. Nji infinite loop mundet po ashtu me ndodh kur specifikon nje value e cila ndrron gjithe dhe ndodhet po ashtu ne dependency array. Ti mundesh me gjet cila, duke i hequr nje nga nje. Sidoqoft, heqja e nje dependency qe ti e perdor (ose qorrazi e specifikon me []) eshte zakonisht rregullimi i gabum. Në vend të kësaj, rregullo problemin në burimin e tij. P.sh. functions mundet me bo kete problem, vendosja e tyre brenda effects, hoisting i tyre, apo vendosja e tyre brenda useCallback ndihmojne. Për të shmangur rikrijimin e objekteve, useMemo mund të shërbejë për një qëllim të ngjashëm.

Pse kanihere e kam old state ose old prop value brenda effect tim?

Efektet gjithmonë "shohin" props dhe state prej render në të cilin janë defined. Kjo ndihmon në parandalimin e gabimeve, por në disa raste mund të jetë i bezdisshëm. Për ato raste, ju mund të ruani në mënyrë eksplicite një vlerë në një referencë të ndryshueshme (artikulli i lidhur e shpjegon atë në fund). Nëse mendoni se po shihni disa props ose _ state_ nga një render i vjetër, por nuk e prisni atë, ndoshta ju mungojne disa dependencies. Provoni të përdorni lint rule për të trajnuar veten për t'i parë ato. Disa ditë dhe do të jetë si një natyrë e dytë për ju. Shihni gjithashtu këtë përgjigje në FAQ tonë.

Shpresoj qe kjo TLDR ke e dobishme.