Untitled

Ahmet Özbey Sorulabilecek Sorular 

1.Ödevde search kısmı çalışmıyor?

TEKNİK SORULAR

1. Code Splitting Nedir?

    Code splitting, büyük JavaScript dosyalarını parçalara bölerek yalnızca ihtiyaç duyulan parçaların yüklenmesini sağlayan bir tekniktir. Bu, uygulamanın başlangıçta daha hızlı yüklenmesini ve kullanıcı etkileşimleri sırasında daha iyi performans sergilemesini sağlar. Özellikle büyük uygulamalarda, sayfa veya bileşen bazında yalnızca gereken kodları yüklemek, ilk yükleme süresini azaltır ve kullanıcı deneyimini iyileştirir.

    import React, { Suspense, lazy } from 'react';

    // Dinamik olarak import edilen bileşen
    const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'));

    function App() {
        return (
            <div>
             <h1>Code Splitting Example</h1>
            <Suspense fallback={<div>Loading...</div>}>
            <LazyLoadedComponent />
            </Suspense>
            </div>
             );
    }


2. React da Prop Drilling olayı nedir ? Dezavantajları nelerdir ve bu dezavantajların nasıl önüne geçilebilir? 

    Prop Drilling'in Dezavantajları:

        Bu örnek, küçük bir uygulama için basit görünebilir. Ancak, uygulamanız büyüdükçe ve daha derin bileşen yapıları kullandıkça, prop drilling çok daha karmaşık hale gelir ve her ara bileşende gereksiz prop aktarımları yapılması zorlayıcı olabilir.

    Prop Drilling'e Alternatif Çözümler:

    Prop drilling sorununu çözmek için bazı alternatifler şunlardır:

    Context API: Context API, global bir state oluşturarak, belirli verileri doğrudan ihtiyaç duyan bileşenlere aktarır. Böylece, aradaki bileşenler üzerinden prop geçişi yapmadan veri paylaşımı yapılabilir.

    State Management Kütüphaneleri: Redux veya Zustand gibi state management kütüphaneleri, global bir state yapısı sunarak prop drilling problemini ortadan kaldırabilir.

3.React'teki yüksek seviyeli bileşenler (HOCs) kavramını açıklayın.
    - Yüksek seviyeli bileşenler (HOCs), bir bileşeni sarmalayarak ona ek işlevsellik kazandıran fonksiyonlardır. HOCs, bileşenlerin yeniden kullanılabilirliğini ve modülerliğini artırır. Örnek olarak, bir bileşene yetkilendirme kontrolü eklemek veya veri sağlamak için kullanılabilir.

4. React'teki "key" propunun önemi nedir?
    React'teki key prop'u, bir liste içindeki her bir bileşeni benzersiz bir şekilde tanımlamak için kullanılır. key prop'u, React’in performansını iyileştirmek ve bileşenlerin doğru bir şekilde güncellenmesini sağlamak için kritik bir rol oynar. İşte key prop'unun önemini ve nasıl kullanıldığını açıklayan bazı temel noktalar:

    1. Performans İyileştirmesi
        Hızlı Güncellemeler: key prop'u, React’in hangi elemanların değiştiğini, eklendiğini veya kaldırıldığını daha hızlı ve etkili bir şekilde anlamasına yardımcı olur. Bu, sanal DOM (virtual DOM) ile gerçek DOM arasında kıyaslama yaparken performansı artırır.

        Elementlerin Yeniden Kullanımı: Eğer listede bir eleman eklenir, silinir veya sıralanırsa, key prop'u sayesinde React, hangi elemanların değiştiğini doğru bir şekilde belirleyebilir ve sadece gerekli güncellemeleri yapar. Bu, gereksiz yeniden render işlemlerinin önüne geçer.

    2. Doğru Güncellemeler
        Benzersizlik Sağlar: Her bir liste elemanının benzersiz bir key değerine sahip olması, React’in hangi bileşenin hangi elemanı temsil ettiğini doğru bir şekilde takip etmesini sağlar. Bu, özellikle liste elemanlarının sıralandığı veya güncellendiği durumlarda önemlidir.

    Güncellemelerde Sorunları Önler: key prop'u eksik veya yanlış kullanıldığında, React bazı bileşenleri yanlışlıkla yeniden oluşturabilir veya mevcut bileşenleri yanlış güncelleyebilir. Bu, kullanıcı arayüzünde beklenmedik davranışlara yol açabilir.

5. React.memo" fonksiyonunun React'teki amacı nedir?**
    - `React.memo`, fonksiyonel bileşenlerin gereksiz yere yeniden render edilmesini önlemek için kullanılır. Bileşenin props'ları değişmediği sürece, `React.memo` bileşenin önceki render'ını yeniden kullanır ve böylece performans artışı sağlar.