Frontend Musahibe Sualları - React.js (2-ci hisse)

Yeni bloqda React.js aid yeni müsahibə sualları təqdim olunmuşdur. Qeyd edək ki, daha əvvəl Frontend Musahibe Sualları - React.js başlığı ilə bu seriyanən ilk hissəsini sizinlə paylaşmışdım. Linkə daxil olaraq tanış ola bilərsiniz. Hər kəsə uğurlar :)

React Virtual DOM-u necə idarə edir və bunun üstünlükləri nələrdir?

React Virtual DOM – real DOM-un yaddaşdakı kopyasıdır. React-də state və ya props dəyişdikdə, yeni Virtual DOM yaradılır və köhnə ilə müqayisə edilir (diffing). Bu prosesdə fərqlər müəyyən edilir və yalnız həmin fərqlər real DOM-da tətbiq olunur (reconciliation).

Üstünlüklər:

• Real DOM-da dəyişikliklər daha az baş verir → performans artır
• UI daha sürətli yenilənir və istifadəçi təcrübəsi yaxşılaşır
• Dəyişikliklərin idarəsi asanlaşır (çünki bütün UI bir tree-də saxlanılır)

Bu texnologiya böyük saytların hazırlanmasında və interaktiv web tətbiqlərində üstünlük təşkil edir.

React Hooks state idarəsi üçün Redux-u tam əvəz edə bilərmi?

Kiçik və orta layihələrdə useState, useReducer, useContext kimi hook-lar Redux-suz işləyə bilər. Amma böyük miqyaslı sayt yaratmaq və ya kompleks frontend proqramlaşdırma layihələri üçün Redux və ya başqa global state menecment kitabxanaları hələ də vacibdir. Məsələn:

• State-lərin asinxron olması,
• Middleware-lərin işlədilməsi (məs. logger, thunk),
• Mürəkkəb store strukturu,

hallarında Redux və ya alternativ (Zustand, Jotai) istifadə daha məqsədəuyğundur.

Redux daha yaxşı debugging, mərkəzləşdirilmiş data strukturu və middleware dəstəyi ilə böyük miqyasda daha stabil işləyir.

Böyük React tətbiqlərində state idarə etmək üçün ən yaxşı təcrübələr hansılardır?

• State-i lokal saxlamaq: Əgər state yalnız bir neçə komponentdə istifadə olunursa, useState və ya useReducer (Azərbaycan dilində izahı) ilə lokal saxlanmalıdır.
• Global state üçün Redux, Zustand, Jotai və ya Context API istifadə edin
• State-i düzgün bölün: UI state (modal açılıb/qapanıb), server state (API-dən gələn məlumat), navigation state kimi fərqləndir.
• Seçimlərlə optimallaşdırma: reselect və memoization texnikaları istifadə edin.
• Tanımlı strukturlar: State-ləri JSON formatında və aydın struktura salın. Bu, saytın gələcəkdə idarəsini asanlaşdırır.
• RTK Query və ya SWR ilə məlumat idarəsi

Bu üsullar peşəkar frontend proqramlaşdırma zamanı saytların hazırlanması prosesində layihənin strukturunu təmiz saxlayır.

Böyük komponent trees malik React tətbiqinin performansını necə optimallaşdırarsınız?

Performans optimallaşdırması üçün bu üsullardan istifadə olunur:

• Component memoization: React.memo, useMemo, useCallback
• Code splitting: React.lazy və Suspense ilə komponentləri ehtiyac olduqda yüklə
• Virtualization: Uzun siyahılar üçün react-window və ya react-virtualized
• Unnecessary re-render-lərin qarşısının alınması: State-ləri mümkün qədər aşağı komponentlərə verin
• Profiling: React Developer Tools ilə performans analiz edin
• Image optimization və lazy loading – Böyük şəkillərlə işləyən veb saytların hazırlanmasında vacibdir.

React-in Strict Mode rejimi nədir və development prosesinə necə təsir edir?

React-in Strict Mode rejimi, tətbiqdəki potensial problemləri aşkar etmək üçün development zamanı istifadə olunan bir alətdir. O, UI-ı render etmir, əksinə komponentlərin potensial problemli davranışlarını aşkar edərək konsola xəbərdarlıqlar verir.

Necə təsir edir:

• Potensial problemləri aşkar edir: Məsələn, köhnəlmiş lifecycle metodlarının istifadəsini, side effect-lərin qeyri-təhlükəsiz yerlərdə baş verməsini və ya context API-nın düzgün istifadə olunmamasını müəyyən edə bilər.
• Deprecation xəbərdarlıqları: Gələcəkdə dəstəyi kəsilə biləcək funksionallıqlar barədə xəbərdarlıqlar verir.
• İkiqat renderləmə: Bəzi effektlərin iki dəfə işə düşdüyünü yoxlayır ki, bu da side effect-lərin təmizlənməsi (cleanup) ilə bağlı problemləri aşkar etməyə kömək edir.
• Asinxron kodun yaxşılaşdırılması: Komponentlərin müəyyən bir vaxtda iki dəfə render olunmasına imkan verərək asinxron funksionallıqların düzgün işlədiyini təmin edir.

Bu rejim istehsal (production) rejimə təsir etməz, ancaq saytların hazırlanması zamanı keyfiyyətli kod yazılmasına dəstək verir.

React funksional komponentlərində lazımsız yenidən renderlərin qarşısını necə almaq olar?

• React.memo(): Bu, funksional komponentləri yaddaşda saxlayır və yalnız prop-ları dəyişdikdə yenidən render edir. Bu, PureComponent -in funksional ekvivalentidir.
• useCallback(): Bu hook, funksiya instansiyalarını yaddaşda saxlayır. Parent komponent render olunduqda, əgər callback funksiyası prop olaraq ötürülürsə və o, həmişə yeni instansiya olaraq yaranırsa, child komponent də lazımsız yerə yenidən render olunur. useCallback bu problemin qarşısını alır.
• useMemo(): Bu hook, bahalı hesablamaların nəticələrini yaddaşda saxlayır. Yalnız asılılıqları dəyişdikdə yenidən hesablanır. Bu, lazımsız re-renderlərin səbəb olduğu performans problemlərinin qarşısını alır.
• Proper key istifadəsi – list map ediləndə key-in düzgün verilməsi
• Split components – böyük komponentləri kiçik hissələrə ayır

React-də funksional və sinif komponentləri arasındakı əsas fərqlər nədir?

React-də funksional və sinif komponentləri arasındakı əsas fərqlər bunlardır:

Frontend proqramlaşdırma sahəsində yeni layihələrdə əsasən funksional komponentlərə üstünlük verilir.

React side effect-ləri necə idarə edir və siz onları effektiv şəkildə necə idarə edə bilərsiniz?

React funksional komponentlərində side effect-ləri (useEffect hook-u vasitəsilə) idarə edir. Side effect-lər, komponentin render olunmasından sonra baş verən, UI-ın yenilənməsi xaricindəki əməliyyatlardır. Bunlara data çəkmə, DOM-a birbaşa müdaxilə, timer-lar, event listener-ları və s. daxildir.

useEffect istifadəsi:

useEffect iki əsas arqument qəbul edir:

1. Callback funksiyası: Effektin özünü ehtiva edən funksiya.
2. Asılılıqlar massivi (dependencies array): Efektin nə zaman yenidən işə düşəcəyini müəyyən edən dəyişənlər siyahısı.

• Boş array [] (yalnız componentDidMount kimi bir dəfə işə düşür).
• Asılılıqlar arrayi yoxdursa (hər renderdə işə düşür).
• Asılılıqlar arrayində dəyişənlər olduqda (dəyişən dəyişəndə işə düşür).

Effektiv idarə etmə:

• Təmizləmə funksiyası (Cleanup function): useEffect hook-u, bəzi side effect-lərin (məsələn, timer-lar, event listener-lar) komponent unmount olduqda və ya asılılıqlar dəyişdikdə təmizlənməsini tələb edə bilər. useEffect callback funksiyasından bir funksiya qaytararaq təmizləmə əməliyyatını həyata keçirmək olar.

useEffect(() => { 

      const timer = setTimeout(() => console.log('Hello'), 1000); 

      return () => clearTimeout(timer); // Təmizləmə 

}, []);

Bir useEffect daxilində çoxlu müxtəlif side effect-lər əvəzinə, hər bir side effect üçün ayrı useEffect istifadə edin. Bu, kodu daha oxunaqlı və idarə olunan edir.

React-də useMemo() və useCallback() hook-ları arasındakı fərqləri izah edin.

useMemo() və useCallback() hər ikisi React-də memoizasiya (yaddaşda saxlama) üçün istifadə olunan hook-lardır, lakin fərqli məqsədlər üçün tətbiq olunurlar:

useMemo():

• Məqsəd: çox vaxt və ya resurs tələb edən, yəni prosessor tərəfindən hesablanması uzun çəkən əməliyyatlar nəticəsini yaddaşda saxlamaqdır.
• Nəyi qaytarır: useMemo bir dəyər qaytarır. Bu dəyər, hook-a ötürülən funksiyanın qaytardığı nəticədir.
• İstifadə vəziyyəti: Funksiyanın nəticəsi eyni asılılıqlarla təkrar çağırılanda dəyişməyən və hesablanması zaman alan bir dəyər varsa.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback():

• Məqsəd: Funksiya instansiyasını yaddaşda saxlamaqdır.
• Nəyi qaytarır: useCallback bir funksiya qaytarır.
• İstifadə vəziyyəti: Bir funksiya prop olaraq bir child komponentə ötürüldükdə, child komponentin lazımsız yerə yenidən render olunmasının qarşısını almaq üçün istifadə olunur. Bu, child komponentin React.memo ilə optimallaşdırıldığı hallarda xüsusilə vacibdir.

const handleClick = useCallback(() => { 

        // ... 

}, [dependency]);

useMemo dəyərləri, useCallback isə funksiyaları memoize edir. Hər ikisi də lazımsız re-renderlərin qarşısını alaraq performansı yaxşılaşdırmağa kömək edir, bu da veb sayt yaratmaq prosesində vacib bir optimallaşdırma təcrübəsidir.

React-də dinamik form idarəsi və validation necə həyata keçirilir?

React-də dinamik form idarəsi və validation üçün bir neçə yanaşma mövcuddur:

Daxili State ilə: Hər bir input elementi üçün komponentin özündə useState istifadə edərək state idarə etmək. Validation logic-i form submit edildikdə və ya input dəyişdikdə işə düşür.

• Üstünlükləri: Kiçik formalar üçün sadə.
• Çatışmazlıqları: Böyük və mürəkkəb formalarda boilerplate kodu çox ola bilər.

Form Kitabxanaları: Yup, Zod ilə Formik, React Hook Form kimi xüsusi form kitabxanaları, dinamik form idarəsi və validation prosesini xeyli asanlaşdırır.

• Formik: Daha çox "controlled components" yanaşmasına əsaslanır. State-i öz daxilində idarə edir.
• React Hook Form: Daha çox "uncontrolled components" yanaşmasına əsaslanır, ref-lərdən istifadə edərək renderləri minimuma endirir. Performans baxımından daha üstün ola bilər.
• Üstünlükləri: Mürəkkəb validasiya qaydalarını (məsələn, sahələrin bir-birindən asılılığı), field array-ləri, submit handling-i və error handling-i daha asan edir. YUP, Zod kimi validation sxemləri ilə inteqrasiya olunur.

Validation həyata keçirilməsi:

• Custom Validation Logic: Hər input dəyişəndə və ya form submit edildikdə funksiyalar vasitəsilə validasiya qaydaları yoxlanılır.
• Validation Sxemləri: YUP, Zod kimi kitabxanalarla validasiya sxemləri təyin edilir. Bu, validasiya logic-ini daha təmiz və təkrar istifadə edilə bilən edir.
• Error mesajları: Validasiya uğursuz olduqda, istifadəçiyə uyğun error mesajları göstərilir.

Frontend proqramlaşdırma zamanı form idarəetməsi çox əhəmiyyətli bir hissədir və bu kitabxanaların istifadəsi saytların hazırlanması prosesini sürətləndirir.

React-də lazy loading nədir və bu, tətbiqin performansını necə yaxşılaşdırır?

React-də lazy loading, komponentləri və ya digər kod hissələrini yalnız ehtiyac duyulduqda yükləmə mexanizmidir. Bu, tətbiqin ilkin yüklənmə vaxtını azaltmağa və ümumi performansını yaxşılaşdırmağa kömək edir.

Necə işləyir:

React, React.lazy() funksiyası və Suspense komponenti vasitəsilə lazy loading-i dəstəkləyir:

• React.lazy(): Bu, dinamik import vasitəsilə bir komponenti import edir. Komponent yalnız render olunmağa ehtiyac duyulduqda yüklənir.

const OtherComponent = React.lazy(() => import('./OtherComponent'));

Suspense: Bu komponent, lazy yüklənmiş komponent hələ yüklənməyibsə, istifadəçiyə göstəriləcək bir "fallback" (məsələn, bir yüklənmə indikatoru) göstərmək üçün istifadə olunur.

<Suspense fallback={<div>Loading...</div>}> 

        <OtherComponent /> 

</Suspense>

Performansı necə yaxşılaşdırır:

• İlkin yüklənmə vaxtının azalması: Veb sayta  daxil olduqda bütün kodu yükləmək əvəzinə, yalnız başlanğıcda lazım olan hissələr yüklənir. Bu, istifadəçinin daha tez interaktiv UI görməsini təmin edir.
• Daha kiçik bundle ölçüləri: Hər bir səhifənin və ya komponentin öz kodu ilə yüklənməsi ümumi bundle ölçüsünü kiçik saxlayır.
• Resursların daha yaxşı istifadəsi: Yalnız lazım olan resurslar yükləndiyi üçün şəbəkə bant genişliyi daha səmərəli istifadə olunur.

Bu, böyük saytların hazırlanması zamanı mütləq tətbiq edilməli bir optimallaşdırma üsuludur.