React.js frontend frontend proqramlaşdırmada ən çox tələb olunan kitabxanalardan biridir və müsahibələrdə bu mövzu üzrə suallar geniş yer tutur. Bu bloqda frontend müsahibə suallarında tez-tez verilən sualları və cavablarını paylaşacağıq. React biliklərini nümayiş etdirmək istəyən namizədlər üçün bu suallar real müsahibə təcrübələrinə əsaslanaraq hazırlanıb. Məqsəd, həm təcrübəli, həm də yeni başlayan frontend developer-lərin müsahibəyə daha yaxşı hazırlaşmaqda dəstək olmaqdır.
React.js - useEffect nədir ? useEffect necə işləyir?
useEffect React-in funksional komponentlərində yan təsirləri idarə etmək üçün istifadə edilən əsas hook-lardan biridir. Yan təsirlər dedikdə, komponentin DOM-a yerləşdirilməsi, yenilənməsi və DOM-dan çıxarılması zamanı baş verən proseslər nəzərdə tutulur. Bu hook class komponentlərində istifadə olunan componentDidMount, componentDidUpdate və componentWillUnmount metodlarını birləşdirir və onları daha sadə və funksional komponentlərə tətbiq edir.
useEffect(() => {
// side effect code
return () => {
// cleanup code (optional)
};
}, [dependencies]);
useEffect-in iş prinsipi:
Renderdən sonra işə düşür: useEffect komponent render edildikdən sonra avtomatik olaraq işə düşür və kodu icra edir.
Yan təsirlər: komponentin əsas render prosesinə birbaşa aid olmayan, lakin istifadəçi təcrübəsini və veb saytın funksionallığını tamamlayan əməliyyatlar – məsələn, API çağırışları, brauzer başlığının dəyişdirilməsi və DOM elementlərinə müdaxilə – nəzərdə tutulur.
Asılılıqlar (dependencies array): useEffect hook-u asılılıqlar (yəni dependencies array) vasitəsilə nə vaxt işləyəcəyini təyin etməyə imkan verir. Əgər asılılıq hissəsinə boş array yazarsaq ([]), useEffect yalnız komponent ilk dəfə DOM-a yerləşdirildikdə – yəni "mount" zamanı – bir dəfə işə düşəcəkdir. Əgər array içinə müəyyən bir dəyişən əlavə olunarsa (məsələn, [count]), bu zaman useEffect yalnız həmin dəyişən dəyişdikcə yenidən işə salınır. Əgər asılılıqlar ümumiyyətlə göstərilməzsə, useEffect hər bir renderdən sonra işləyəcək. Bu, performansa mənfi təsir göstərə bilər və gözlənilməz davranışlara səbəb ola bilər.
useEffect(() => {
console.log("count dəyişdi:", count);
}, [count]);
Əgər useEffect içində jQuery ilə elementlərə çatmaq mümkündürsə, bəs niyə useRef istifadə edirik?
useRef, React tərəfindən təqdim edilən təhlükəsiz və performanslı bir yanaşmadır. DOM elementinə birbaşa çatmaq üçün jQuery istifadə etmək texniki olaraq mümkün olsa da, bu üsul React-in virtual DOM prinsiplərinə ziddir və komponentlərin idarəsini çətinləşdirə bilər. useRef istifadə etməklə, React-in komponent həyatı dövrünə (lifecycle) uyğun şəkildə DOM ilə əlaqə saxlamaq mümkündür. Bu da kodun daha sabit, oxunaqlı və təhlükəsiz olmasına şərait yaradır.
useEffect içində return olmalıdırmı? Hansı hallarda return yazılır?
Xeyr, useEffect içində return mütləq olmalı deyil. Əgər useEffect içində başladılan bir prosesin (məsələn, event listener, interval, subscription) təhlükəsiz şəkildə dayandırılması və ya təmizlənməsi lazımdırsa, mütləq return ilə bir cleanup function yazmaq lazımdır. Əgər belə bir proses yoxdursa (məsələn, sadəcə API çağırışı varsa), return yazmaq şərt deyil.
useEffect içində return aşağıdakı hallarda istifadə olunur:
1. Event listener-ləri silmək üçün
useEffect(() => {
const handleScroll = () => console.log("Scrolling...");
window.addEventListener("scroll", handleScroll);return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
2. Interval və timeout-ları təmizləmək üçün
useEffect(() => {
const intervalId = setInterval(() => {
console.log("Interval working");
}, 1000);return () => {
clearInterval(intervalId);
};
}, []);
3. WebSocket bağlantılarını bağlamaq, abort fetch və s. üçün
useEffect(() => {
const controller = new AbortController();
fetch("/api/data", { signal: controller.signal });return () => {
controller.abort(); // sorğunu ləğv et
};
}, []);
Redux nədir? Redux nə üçün istifadə olunur?
React kimi frontend kitabxanalarında komponentlər bir-birindən müstəqil işləyir və öz state-lərini saxlayır. Lakin, böyük və mürəkkəb tətbiqlərdə, müxtəlif komponentlər arasında məlumat paylaşmaq və idarə etmək çətinləşir.
Redux, bu problemi həll etmək üçün yaradılmış mərkəzləşdirilmiş state management (vəziyyət idarəetmə) kitabxanasıdır.
Redux-un Əsas Məqsədləri:
- Mərkəzləşdirilmiş state idarəsi:
Bütün veb saytın vəziyyəti (state) tək bir yerdə — storeda saxlanılır. Bu, məlumatların idarə olunmasını və izlənməsini asanlaşdırır. - Proqnozlaşdırıla bilən state dəyişiklikləri:
State yalnız actions və reducers vasitəsilə dəyişir. Bu, veb saytın davranışını daha asan izləməyə və analiz etməyə imkan verir. - Komponentlər arasında məlumat paylaşımının asanlaşması:
Komponentlər bir-biri ilə birbaşa əlaqə saxlamadan, ortaq store üzərindən məlumatları alıb-verə bilir. - Debug və test imkanları:
Redux-un alətləri (məsələn, Redux DevTools) sayəsində state-in hər bir dəyişiklik addımı izlənilə, geriyə qaytarıla və tətbiq daha asan test edilə bilir.
useMemo, memo və useCallback React-da nə üçün istifadə olunur və aralarındakı fərq nədir?
useMemo, memo və useCallback React-da performans optimizasiyası üçün istifadə olunan vasitələrdir.
useMemo ağır və ya mürəkkəb hesablama nəticəsini yaddaşda saxlayır və yalnız asılılıqlar dəyişəndə həmin hesablamanı yenidən edir, beləliklə lazımsız hesablamaların qarşısını alır.
memo isə funksional komponentləri “cache”-ləyərək, əgər props dəyişməyibsə, komponentin yenidən render olunmasının qarşısını alır və render sayını azaldır.
useCallback isə funksiyaların yaddaşda saxlanmasını təmin edir; yəni, eyni asılılıqlarla funksiyanı yenidən yaratmır, beləliklə onu props kimi ötürərkən yeni funksiya yaradılmasının qarşısını alır.
Bu üçü birlikdə React ilə hazırlanan veb saytları daha səmərəli render və hesablama idarəsi üçün istifadə olunur.
React ilə hazırlanan veb saytların mənfi cəhətləri nələrdir?
React ilə hazırlanan veb saytların bəzi mənfi cəhətləri var:
React əsasən client-side rendering (müştəri tərəfində render) modelinə əsaslandığı üçün, axtarış motorları bəzən tam və düzgün məzmunu indeksləməkdə çətinlik çəkə bilər. Bu, SEO optimizasiyasını çətinləşdirə və saytın axtarış motorlarında indexlənməsini azalda bilər.
React ilə hazırlanan veb saytlar ilkin yükləmə vaxtı bəzən yüksək ola bilər, çünki bütün JavaScript kodu brauzer tərəfindən işlənməlidir. Bu, istifadəçi təcrübəsini və saytın performansını mənfi təsir edə bilər.
Böyük və kompleks React tətbiqlərində state idarəsi, komponentlərin əlaqələndirilməsi və optimizasiya məsələləri çətinlik yarada bilər, bunun üçün əlavə kitabxanalar və alətlər tələb oluna bilər.
SEO və performans məsələlərini tam həll etmək üçün bəzən server-side rendering (SSR) və ya static site generation (SSG) kimi əlavə texnologiyalar və framework-lər (məsələn, Next.js) istifadə etmək lazım gəlir ki, bu da layihənin mürəkkəbliyini artırır.
Bu səbəblərlə React ilə işləyərkən bu məqamlara diqqət etmək və uyğun həllər tətbiq etmək vacibdir.
