React Js | Hooks nədir? UseState(), UseEffect() nədir?

React Js -in yenilənmiş, 16.8 versiyası ilə hooks əlavə olundu. Və beləcə, class yazmadan, React state ve lifecycle özelliklerini functional componentlərdə istifadə etmək mümkün oldu. Əgər biz state istifadə etmək istədikdə, gərək class component yazmalı idik, lakin hooks ilə bu məcburiyyət aradan qalxdı. Ümumi hooks xəritəsi aşağıdakı kimidir:

Şəkil 1.

Əlavə olaraq da qeyd edim ki, custom hook-lar da yarada bilərik.

İlk öncə hook-lar proyectə react-dan impot edilir və daha sonra istifadə edirik. Bunu üçün sadəcə, istifadə edəcəyimiz componentdə, istifadə edəcəyimiz hook-u yazırıq;

Şəkil 2.

1. UseState() nədir ❓

Functional componentlərdə, funksiyanın dəyərini tutan və bu dəyər üzərində hər hansı dəyişiklik etməyə icazə verən hook-dur. Əvvəllər bunun üçün constructor() yazıb, içində state-ni təyin edirdik. Bu həm uzun idi həm də kod qarışıqlığına yol veriridi.

Şəkil 3. const [state, setState] = useState()

*state və setState şərti sözlərdir

1-ci hissə state-imiz, 2-ci hissə isə state dəyişmək və ya üzərində hər hansı bir iş görmək üçün lazım olan funksiyadır. useState()-nin içərisində isə state-in ilkin dəyərini tuta bilirik. Sadə misal ilə daha aydın olacaq.

Şəkil 4. Nümunə linki — https://codesandbox.io/s/medium-usestate-example-zz6zo

Bu nümunə inputa daxil olan dəyəri ekrana çıxarır. Əvvəlcə useState() təyin edirik. Inputa daxil olan dəyəri tutan state, yəni “name” , state dəyişən zaman onu ekrana çıxaram setState, yəni “setName” funksiyasını yazırıq. Və useState()-ə ilkin dəyər kimi istədiyimiz dəyəri verə də bilərik, verməyə də bilərik. Eyni zamanda bu dəyər boş string-“ ” , boş array-[], boolean dəyər-true, false və s. ola bilər.

Mən nümunədə ilkin dəyər kimi “User Name” qeyd etdim. Və ilk açılan kimi bu dəyər ekranda əks olunur. Sonda inputa onChange etdiyimiz zaman bu funksiyanın işə düşməyi üçün

onChange={e =>setName(e.target.value)} ,

kimi yazırıq. -e.target.value o deməkdir ki, her daxil olan dəyəri götürür. Aydın görmək üçün console.log() yazıb baxmaq olar. Beləcə, inputa daxil olan dəyərlər {name} yazaraq ekrana çıxır. Eyni nümunəni əvvəlki metodla da edək;

Şəkil 5. Nümunə linki — https://codesandbox.io/s/react-constructor-medium-example-xr91x

Eyni ilə şəkil 1-də olan nümunə kimidir. Fərq isə, class component, kod çoxluğu və qarışıqlığı. Reactda yenilənmələr zamanı constructor() da yazılan kodları qısaldıb təkcə state = { name: “User Name” }, kimi də yazmaq olar.

UseEffect() nədir ❓

Əvvəllər react class lifecycle-də componentDidMount() , componentDidUpdate() və componentWillUnmount() metodlar yazılırdı. Bu metodları hooks ilə gələn useEffect() ilə də etmək olar. UseEffect() ilə, lifecycle də etdiyimiz Side Effectləri yəni, component yükləndikdən sonra etmək istədiyimiz işləri ; Api Request, Data Fetching və s. edə bilirik.

Şəkil 6.

Şəkildəki 3 hal ilə UseEffect() daha aydın olacaq. Deməli 1-ci haldakı kimi yazdıqda həmcomponentDidMount() həm dəcomponentDidUpdate() -in özəlliklərini daşıyır. Yəni səhifə ilk render olunduqda və səhifədə hər hansı bir state üzərində dəyişiklik olduqda UseEffect() işləyir. Əvvəlki versiada isə bu prosesləri ayrı-ayrı yazırdıq. Səhifə ilk render olunanda funksiyanı bir dəfə çağıramaq istədikdəcomponentDidMount() , səhifədə hər hansı bir dəyiklik olduqda funksiyanı hər dəfə çağırılmağını istədikdə isə componentDidUpdate() yazırdıq. Bunu sadə bir misalda aydınlaşdırmaq olar.

Şəkil 7.

Bu link vasitəsilə daha dəqiq baxa bilərsiniz. Misalda ilk səhifə açıldıqda UseEffect()-in içində yazdığımız console.log(“UseEffect”) bir dəfə işə düşür. Daha sonra state-i hər dəfə yenilədikdə (yəni “artır”-a kilik etdikdə) də işə düşür.

2-ci haldakı kimi, useEffect()-ə parametr kimi boş bir array [] — yazdıqda, componentDidMount() kimi səhifə yeniləndikdə funksiya bir dəfə işləyir.

Şəkil 8.

3-cü halda isə massivə, yəni [ ] içərisinə yazdığımız state-dir. Və səhifədə hansı state üzərində iş gördükdə, baş verən dəyişikliyə reaksiyanı bildirir. Yəni tutaq ki, count-u useEffect(() => {…}, [count]) kimi yazsaq, bu zaman səhifədə state nə qədər olursa olsun təkcə count state-nə təsir etdikdə, UseEffect()-də o çalışacaq. Nümunə kimi iki müqaisə funksiyası yazaq;

Şəkil 9. Nümunə linki-https://codesandbox.io/s/useeffect-conut-count2-byo0n

Şəkildən də göründüyü kimi, səhifə ilk açıldıqda 1 dəfə useEffect() render olunur və count-a 2 dəfə klik olunub cəmi 3 “useEffect” yazısı console.log()-da əks olunur. Digər count2 isə yenilənmə olsada useEffect() -də yazılmadığı üçün görünmür. Yekun olaraq, hansı state-in yenilənməsini istədikdə UseEffect()-də bu formada istifadə edə bilərik.

Son olaraq componentWillUnmount() -in daşıdığı özəlliyik ilə də UseEffect()-dən də istifadə edə bilərik. Sintaksis olaraq, Şəkil 6-da, 4-cü halda qeyd olunub. Daha detaylı izah etsək, tutaq ki, səhifədə hər dəfə yenilənmə halları olur və bu səhifədən digərinə keçdikdə bu halı arxa planda dayandırmalıyıq ki, əlavə yüklənməyə səbəb olmasın. Bunun üçün useEffect()-lə sadə formada desək təmizləmə işləri görərək məsələni həll etmiş oluruq. SetInterval() ilə yazılmış aşağıdakı nümunəyə baxaq;

Şəkil 10. Nümunə linki-https://codesandbox.io/s/useeffect--componentwillunmount-viqfy

Nümunədə qeyd olunduğu kimi interval 2 saniyədən bir gəlir. Və biz novbəti səhifəyə toggle ile keçid etdikə intervalın sonlandığını görə bilərik. Və yenidən daxil olduqda harda qalmışdırsa orda da davam edəcək.

Ümid edirəm faydalı olmuşdur💖✍

— Happy Coding!😇