React Mülakat Soru Rehberi

React Nedir?

React, Facebook tarafından geliştirilen, açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri (UI) oluşturmak için kullanılır ve özellikle bileşen tabanlı mimariyi (component-based architecture) esas alır.

React, sadece View katmanına (V - MVC) odaklanır ve diğer işlemler için ek kütüphanelere ihtiyaç duyar. React’in en büyük avantajları hızlı, esnek ve ölçeklenebilir olmasıdır.

React’in Türleri ve Ekosistemi

React ekosistemi birçok farklı yapıyı içerir. İşte en yaygın kullanılan React türleri ve ekosistem bileşenleri:

1. React (Klasik React)
   
   • Temel React kütüphanesi
   • Class Components (Eski yaklaşım)
   • Functional Components (Modern yaklaşım)
   • React Hooks (State ve Lifecycle yönetimi için)
2. React Native
   
   • Mobil uygulamalar geliştirmek için kullanılır
   • Android ve iOS için native uygulamalar yazılmasını sağlar
   • React'in temel prensiplerini kullanarak mobil arayüzler oluşturulabilir
3. Next.js (React Framework)
   
   • SEO dostu, sunucu taraflı render (SSR) ve statik site oluşturma (SSG) destekli framework
   • React’in en büyük dezavantajlarından biri olan SEO sorununu çözer
   • API Routes, Middleware, ISR gibi özellikleri vardır
4. Gatsby.js
   
   • Statik site oluşturma (SSG) için kullanılır
   • SEO için optimize edilmiştir
   • React ve GraphQL ile çalışır
5. Remix
   
   • Sunucu tarafında çalışan modern bir React framework’üdür
   • Progressive Enhancement ilkesini benimser
6. Recoil & Zustand (State Yönetimi için)
   
   • React’in dahili state yönetimi yeterli gelmediğinde kullanılan alternatiflerdir
7. React Query (Veri Yönetimi)
   
   • API çağrılarını optimize eden ve cache yönetimi sağlayan popüler bir kütüphane
8. Redux & Redux Toolkit
   
   • Global state yönetimi için en popüler kütüphanelerden biridir
   • Redux Toolkit ile daha kolay ve verimli kullanılabilir

React ekosistemi, kullanıcı arayüzü geliştirme sürecini daha verimli hale getiren birçok araç ve kütüphane içerir. Temel React özelliklerini ve ekosistem bileşenlerini anladıktan sonra, iş mülakatlarında sıkça karşılaşabileceğiniz React sorularına ve bu sorulara verilen detaylı yanıtlarla devam edelim.

1. React nedir ve neden kullanılır?

React, Facebook tarafından geliştirilen açık kaynaklı bir JavaScript kütüphanesidir. Kullanıcı arayüzleri (UI) oluşturmak için kullanılır ve özellikle bileşen tabanlı (component-based) mimariye dayanır. React, özellikle tek sayfa uygulamalar (SPA - Single Page Applications) geliştirmek için idealdir.

Neden React Kullanılır?

• Bileşen Tabanlı Mimari → UI parçalarını tekrar kullanılabilir bileşenler olarak tasarlamayı sağlar.
• Virtual DOM → Daha hızlı UI güncellemeleri ile performansı artırır.
• Hızlı Öğrenilebilir → JavaScript ve HTML bilgisi olan biri için öğrenmesi kolaydır.
• Büyük Ekosistem ve Destek → Çok sayıda kütüphane ve topluluk desteği bulunmaktadır.
• SEO Uyumluluğu → Next.js gibi çatılarıyla birlikte kullanıldığında SEO açısından optimize edilebilir.

2. JSX nedir ve nasıl çalışır?

JSX (JavaScript XML), JavaScript içinde HTML benzeri kod yazmamıza olanak tanıyan bir sözdizimidir. JavaScript’in React.createElement() fonksiyonuna çevrilen özel bir sözdizimi olarak çalışır.

JSX’in Çalışma Mekanizması:

• Kolay okunur ve yazılır → JavaScript içine HTML gömmek için idealdir.
• Bileşenlerin tanımlanmasını basitleştirir.
• ES6 JavaScript fonksiyonları ile entegre çalışır.

Örneğin, normal JavaScript ile bir element oluşturmak yerine JSX kullanarak daha okunaklı bir yapı oluşturabiliriz.

3. React’in temel özellikleri nelerdir?

React'in en belirgin özellikleri şunlardır:

1. Component-Based Architecture (Bileşen Tabanlı Mimari)
   
   • React’te UI bileşenlere ayrılır ve her bileşen bağımsız olarak yönetilebilir.
   • Bileşenler tekrar kullanılabilir ve bakımı kolaydır.
2. Virtual DOM (Sanal DOM)
   
   • Performansı artırmak için gerçek DOM’a doğrudan müdahale etmez.
   • Fark algılama (Diffing Algorithm) sayesinde sadece değişen bileşenler güncellenir.
3. Unidirectional Data Flow (Tek Yönlü Veri Akışı)
   
   • Props aracılığıyla veri üst bileşenden alt bileşene taşınır.
   • Veri değişiklikleri daha öngörülebilir hale gelir.
4. Hooks Desteği
   
   • useState, useEffect, useContext gibi hook’lar ile fonksiyonel bileşenlerde state ve yan etkiler yönetilebilir.
5. JSX Kullanımı
   
   • HTML benzeri bir sözdizimi ile bileşenlerin daha okunabilir olmasını sağlar.

4. Sanal DOM (Virtual DOM) nedir ve nasıl çalışır?

Sanal DOM, gerçek DOM’un hafif ve güncellenebilir bir kopyasıdır. React, bileşenlerde değişiklik olduğunda önce sanal DOM üzerinde işlemi yapar, sonra gerçek DOM’a sadece gerekli güncellemeleri uygular.

Sanal DOM'un Çalışma Prensibi

1. React, bileşenlerde değişiklikleri algılar.
2. Sanal DOM üzerinde değişiklikler yapılır.
3. React, önceki sanal DOM ile yeni sanal DOM'u karşılaştırır (Diffing Algorithm).
4. Sadece değişen kısımlar gerçek DOM’a yansıtılır.

Bu yöntem, performansı artırır ve gereksiz DOM manipülasyonlarını engeller.

5. React bileşenleri (Components) kaç çeşittir ve farkları nelerdir?

React bileşenleri iki ana kategoriye ayrılır:

1. Class Components (Sınıf Bileşenleri)

• ES6 class sözdizimi ile tanımlanır.
• this.state ve this.props kullanılarak veri yönetilir.
• React’in yaşam döngüsü metodlarını (componentDidMount, componentDidUpdate, vb.) destekler.

Dezavantajları:

• Daha fazla kod yazmayı gerektirir.
• React Hooks çıkmadan önce state yönetimi için zorunlu kullanılıyordu.

2. Functional Components (Fonksiyonel Bileşenler)

• Sadece JavaScript fonksiyonlarıdır.
• useState ve useEffect gibi Hooks kullanılarak state ve yaşam döngüsü yönetilebilir.
• Daha sade, okunaklı ve performanslıdır.

React 16.8’den sonra, Fonksiyonel Bileşenler Hooks ile Class Bileşenler kadar güçlü hale gelmiştir ve modern projelerde yaygın olarak kullanılır.

6. React'ta props nedir ve nasıl kullanılır?

Props, bileşenler arasında veri taşımak için kullanılan özel React özellikleridir. Bir bileşenin üst bileşenden aldığı verileri temsil eder.

Props’un Özellikleri

• Salt Okunur (Immutable) → Değiştirilemez, sadece üst bileşenden gelen veriyi alır.
• Tek Yönlü Veri Akışı Sağlar → Veriler yukarıdan aşağıya akar.
• Fonksiyonlar ve JSX İçerikleri Taşınabilir.

7. React'ta state nedir ve nasıl yönetilir?

State, bileşenin iç durumu olup, bileşenin yeniden render edilmesini sağlar. State değiştiğinde, React ilgili bileşeni tekrar render eder.

State Yönetim Yöntemleri

1. Yerel State (useState) → Bileşen içinde yönetilir.
2. Global State (useContext, Redux, Recoil, Zustand) → Birden fazla bileşenin aynı state’i paylaşmasını sağlar.
3. Derived State → Bir bileşenin aldığı props’lardan türetilen state.

State, veri değişikliklerini kontrol etmek ve bileşeni güncellemek için kullanılır.

8. React’te Lifecycle (Yaşam Döngüsü) metodları nelerdir?

React bileşenlerinin oluşma, güncellenme ve kaldırılma aşamalarında çalışan metodlar vardır.

1. Mounting (İlk Yüklenme)
   
   • constructor()
   • componentDidMount()
2. Updating (Güncellenme)
   
   • shouldComponentUpdate()
   • componentDidUpdate()
3. Unmounting (Bileşen Kaldırılma)
   
   • componentWillUnmount()

Günümüzde, Fonksiyonel bileşenlerde bu metodlar useEffect ile yönetilir.

9. React Hooks nedir ve neden ortaya çıkmıştır?

React Hooks, class bileşenlerindeki state ve lifecycle metodlarını fonksiyonel bileşenlerde kullanmayı sağlayan yeni React API’leridir.

Neden Hooks Kullanılır?

• Class bileşenlerine ihtiyaç duymadan state yönetimi sağlar.
• Kod tekrarını azaltır.
• React bileşenlerini daha okunaklı hale getirir.

Örneğin, useState ile state yönetimi, useEffect ile yan etkileri yönetmek mümkündür.

10. React’te neden key kullanılır ve key’lerin önemi nedir?

Key, React’in liste öğelerini takip etmesine yardımcı olan özel bir prop’tur. Listelerde verimli render süreci sağlamak için kullanılır.

Key Kullanmanın Avantajları:

• Performansı artırır, React’in gereksiz render işlemlerini önler.
• Güncellenen veya silinen öğeleri daha hızlı tespit eder.

Özetle, key’ler dinamik listelerin verimli bir şekilde işlenmesini sağlar.

‍

11. React Router nedir ve nasıl çalışır?

React Router, React uygulamalarında URL yönlendirmelerini yönetmek için kullanılan bir routing (yönlendirme) kütüphanesidir. Tek sayfa uygulamalarında (SPA - Single Page Application), kullanıcıların farklı sayfalara gidiyormuş gibi hissetmesini sağlarken sayfa yenileme işlemi olmadan bileşen değiştirir.

React Router'ın Temel Özellikleri

• Dinamik URL Yönetimi → Kullanıcı dostu ve SEO için optimize edilebilir URL yapıları sağlar.
• Nested Routes (İç İçe Rotalar) → Bileşen içinde başka bileşenleri yönlendirme imkanı sunar.
• Lazy Loading Desteği → Yalnızca ihtiyaç duyulan bileşenler yüklenerek performans artırılır.

Nasıl Çalışır?

React Router, URL değişikliklerini dinleyerek hangi bileşenin gösterileceğini belirler. Genellikle <BrowserRouter>, <Route>, <Link> ve <Switch> gibi bileşenler kullanılarak yapılandırılır.

Gerçek Hayatta Kullanım Örnekleri:

• Bir e-ticaret sitesinde /home, /products, /cart gibi sayfalar oluşturmak.
• Kullanıcı giriş-çıkış işlemlerini yönlendirmek.

12. Controlled ve Uncontrolled bileşenler arasındaki fark nedir?

Controlled Components (Kontrollü Bileşenler)

• State tarafından yönetilen form elemanlarıdır.
• Form elemanlarının değerleri React state üzerinden kontrol edilir.
• Her değişiklik bir event handler (ör. onChange) aracılığıyla güncellenir.

Avantajları:

• Daha iyi kontrol ve doğrulama sağlar.
• Kullanıcı girişlerini anlık olarak yönetmeye olanak tanır.

Uncontrolled Components (Kontrolsüz Bileşenler)

• Değerleri doğrudan DOM tarafından yönetilen bileşenlerdir.
• useRef() gibi yöntemler kullanılarak doğrudan erişilir.

Avantajları:

• State yönetimine ihtiyaç duymaz, performans açısından avantajlıdır.
• Basit formlarda kullanımı kolaydır.

Özetle: Küçük formlar için Uncontrolled, büyük ve dinamik formlar için Controlled Components tercih edilir.

13. React Context API nedir ve nasıl kullanılır?

Context API, bileşenler arasında prop drilling yapmadan (props taşımadan) veri paylaşmayı sağlayan global state yönetim aracıdır.

Context API’nin Temel Kullanım Senaryoları

• Tema yönetimi (Açık/Koyu mod)
• Dil çevirileri ve lokalizasyon
• Kullanıcı oturum ve yetkilendirme bilgileri
• Sepet yönetimi (E-ticaret uygulamalarında)

Avantajları:

• Prop drilling sorununu ortadan kaldırır.
• Daha okunaklı ve düzenli kod yazmayı sağlar.
• Redux gibi harici kütüphanelere alternatif olabilir.

Büyük ölçekli projelerde Context API yerine Redux veya Zustand gibi çözümler tercih edilebilir.

14. React Portals nedir ve hangi durumlarda kullanılır?

React Portals, bileşenleri mevcut DOM hiyerarşisinin dışına render etmeye olanak tanır.

Ne İşe Yarar?

Bazı durumlarda bileşenlerin root bileşenin dışında bir yerde render edilmesi gerekir. Örneğin:

• Modallar (Popup Pencereleri)
• Tooltip (Bilgi Balonları)
• Toast bildirimleri
• Global üst seviye menüler ve uyarılar

Avantajları

• CSS z-index ve stil problemlerini önler.
• Sayfanın geri kalanından bağımsız olarak render edilir.

Özetle, Portals sayesinde modal veya tooltip gibi öğeleri farklı bir DOM konumuna ekleyerek stil ve davranış açısından daha iyi kontrol sağlanır.

15. React Fragments nedir ve neden kullanılır?

React Fragments, gereksiz <div> elementleri eklemek yerine birden fazla öğeyi kapsayıcı olmadan gruplamak için kullanılır.

Neden Kullanılır?

• DOM ağacını temiz ve hafif tutar.
• CSS ve Flexbox/Grid gibi yapıların gereksiz <div> eklenmeden düzgün çalışmasını sağlar.
• Performansı artırır, çünkü gereksiz HTML elemanları oluşturmaz.

Özellikle listeler ve tablolarda gereksiz HTML elemanlarını önlemek için tercih edilir.

16. useEffect nedir ve hangi senaryolarda kullanılır?

useEffect(), yan etkileri (side effects) yönetmek için kullanılan bir React Hook’udur.

Hangi Senaryolarda Kullanılır?

• API çağrıları yapmak (veri almak, güncellemek)
• Bileşen mount/unmount işlemlerini yönetmek
• Event listener’lar eklemek ve temizlemek
• Yerel depolama (Local Storage) işlemleri yapmak

Avantajları:

• Bileşenlerin yaşam döngüsüne uygun olarak kod çalıştırmayı sağlar.
• Sınıf tabanlı bileşenlerde kullanılan yaşam döngüsü metodlarının yerini alır.

17. React.memo nedir ve nasıl performans iyileştirmesi sağlar?

React.memo(), bileşenleri gereksiz render işlemlerinden korumak için kullanılan bir optimizasyon tekniğidir.

Nasıl Çalışır?

• Bileşenler tekrar render edilirken, prop'lar değişmemişse gereksiz render işlemlerini önler.
• Performansı artırır, özellikle büyük ve maliyetli bileşenlerde faydalıdır.

Ancak her durumda kullanılmamalıdır, çünkü küçük bileşenlerde ekstra karşılaştırma maliyetine yol açabilir.

18. React’te useCallback ve useMemo farkı nedir?

Özellik:

‍

useCallback

useMemo

‍

Amaç:

Fonksiyonları optimize eder

Değerleri cache eder

Ne Döndürür?

Memoized fonksiyon

Memoized değer

Kullanım Senaryosu

Event handler’ları optimize etmek

Ağır hesaplamaların sonucunu saklamak

Performans Etkisi

Gereksiz fonksiyon tanımlamalarını önler

Hesaplamaları tekrar yapmaktan kaçınır

Özetle, useCallback fonksiyonları, useMemo hesaplanmış değerleri saklar.

19. Redux nedir ve neden kullanılır?

Redux, React uygulamalarında global state yönetimi sağlamak için kullanılan bir kütüphanedir.

Neden Redux Kullanılır?

• Veriyi merkezi bir store’da saklayarak bileşenler arasında paylaşılmasını sağlar.
• State’in kontrol edilebilir ve tahmin edilebilir olmasını sağlar.
• Büyük ölçekli uygulamalarda prop drilling sorununu çözer.

Redux kullanımı özellikle büyük ve karmaşık projelerde tercih edilir.

20. Redux'in temel bileşenleri nelerdir?

Redux’in temel bileşenleri şunlardır:

1. Store → Uygulamanın tüm state'ini saklayan merkez.
2. Actions → State’i değiştiren olaylar.
3. Reducers → State’in nasıl değişeceğini belirleyen saf fonksiyonlar.
4. Dispatch → Action’ları tetikleyen fonksiyon.
5. Middleware → Asenkron işlemleri yönetmek için kullanılır (örn. Redux Thunk).

Redux, global state yönetimi konusunda güçlü bir araçtır, ancak her proje için gerekli değildir.

‍

21. Next.js ile React arasındaki farklar nelerdir?

Next.js, React tabanlı bir framework’tür ve React’in bazı eksik yönlerini kapatarak geliştirilmiş daha güçlü bir yapıdır.

Özellik

React

Next.js

Routing (Yönlendirme)

Manuel olarak ayarlanır (React Router gerekir)

Otomatik dosya bazlı yönlendirme (pages/)

SEO Desteği

Zayıf (CSR - Client Side Rendering)

Güçlü (SSR - Server Side Rendering, SSG - Static Site Generation)

Sayfa Yükleme Performansı

İlk yükleme yavaş olabilir

Daha hızlı yükleme için önbellekleme yapar

API Routes

Harici API ihtiyacı vardır

Dahili API routes desteği

Lazy Loading

Harici kütüphaneler ile uygulanır

Dahili lazy loading desteği vardır

Next.js’in Avantajları:

• SEO dostudur, çünkü SSR (Server-Side Rendering) ve SSG (Static Site Generation) destekler.
• Dahili yönlendirme sistemi vardır, ek bir kütüphane (React Router) gerektirmez.
• Performans açısından optimize edilmiştir, CDN ve önbellekleme kullanır.

Özetle, React sadece UI kütüphanesiyken, Next.js tam özellikli bir framework olarak geliştirilmiştir.

22. React Fiber nedir ve nasıl çalışır?

React Fiber, React’in Virtual DOM algoritmasının optimize edilmiş bir sürümüdür. React 16 ile tanıtılmıştır ve özellikle UI güncellemelerini daha hızlı ve akıcı hale getirmek için geliştirilmiştir.

React Fiber’in Getirdiği Avantajlar

• Asenkron Rendering: UI güncellemelerini kesintiye uğratmadan yönetir.
• Daha Hızlı UI Güncellemeleri: Özellikle animasyonlar ve büyük DOM manipülasyonlarında etkilidir.
• Prioritization (Önceliklendirme): Önemli UI güncellemelerini diğer işlemlerden önce yapar.
• Concurrency Mode Desteği: UI akıcılığını artırır.

React Fiber, özellikle büyük ve kompleks uygulamalarda performansı önemli ölçüde artırır.

23. React Server Components (RSC) nedir ve avantajları nelerdir?

React Server Components (RSC), bileşenleri sunucu tarafında render etmeye olanak tanır. Next.js 13+ ile popüler hale gelmiştir.

Avantajları

• Daha hızlı sayfa yükleme süreleri sağlar.
• İstemci tarafına gereksiz JavaScript gönderilmesini önler, böylece daha hafif sayfalar oluşturur.
• SEO için idealdir, çünkü içerik sunucu tarafında işlenir.
• API çağrılarını doğrudan sunucuda yapabilir, böylece istemci tarafında gereksiz veri çekme işlemlerini önler.

React Server Components, özellikle performansı artırmak ve SEO dostu uygulamalar geliştirmek için idealdir.

24. React’te lazy loading (tembel yükleme) nedir ve nasıl uygulanır?

Lazy Loading, bileşenlerin ve kaynakların yalnızca ihtiyaç duyulduğunda yüklenmesini sağlayan bir optimizasyon tekniğidir.

Neden Kullanılır?

• Başlangıç yükleme süresini azaltır.
• Performansı artırır.
• Kullanıcı deneyimini geliştirir.

Lazy Loading Uygulama Alanları

• Büyük bileşenlerin yüklenmesini geciktirmek.
• Görsellerin yüklenmesini optimize etmek.
• Harici kütüphanelerin ve üçüncü taraf modüllerin gereksiz yüklenmesini önlemek.

Next.js içinde otomatik olarak lazy loading desteği vardır.

25. React’te Forward Ref (useRef) nedir ve nasıl kullanılır?

Forward Ref, bir bileşenin çocuk bileşenlerine doğrudan erişim sağlamasına olanak tanır.

Neden Kullanılır?

• DOM elemanlarına doğrudan erişmek için (input, button, vb.).
• Üçüncü taraf kütüphanelerle entegrasyon yapmak için.
• Performans optimizasyonları için.

useRef, bir bileşenin tekrar render edilmesini önleyerek performansı artırır.

26. React Concurrent Mode nedir ve hangi avantajları sağlar?

Concurrent Mode, React’in UI güncellemelerini kesintiye uğratmadan yönetmesini sağlayan yeni bir özellik setidir.

Avantajları

• Zaman alan işlemleri arka planda çalıştırır, böylece UI kesintiye uğramaz.
• Öncelikli render işlemlerine izin verir.
• Karmaşık animasyonları ve geçişleri optimize eder.

Özetle, Concurrent Mode sayesinde daha akıcı ve kesintisiz kullanıcı deneyimi sağlanır.

27. React’te performans optimizasyonu için en iyi yöntemler nelerdir?

React uygulamalarında performans iyileştirmek için şu yöntemler kullanılabilir:

1. Memoization Kullanımı

• React.memo → Bileşenlerin gereksiz render edilmesini engeller.
• useCallback ve useMemo → Fonksiyonların ve hesaplamaların tekrar çalışmasını önler.

2. Lazy Loading

• React.lazy ve Suspense ile bileşenlerin tembel yüklenmesi sağlanabilir.

3. Sanal Listeler (Virtualized List) Kullanımı

• Büyük listeleri optimize etmek için react-window veya react-virtualized kullanılabilir.

4. Gereksiz Render'ları Önlemek

• State değişimlerini en aza indirmek, gereksiz useEffect çağrılarını engellemek.

5. CDN Kullanımı ve Resim Optimizasyonu

• Next.js Image bileşeni, büyük resimleri optimize etmek için kullanılabilir.

28. React Strict Mode nedir ve nasıl kullanılır?

React Strict Mode, uygulamadaki potansiyel hataları bulmak ve geliştirme aşamasında uyarılar vermek için kullanılan özel bir bileşendir.

Ne İşe Yarar?

• Eski API’leri tespit eder ve uyarılar verir.
• Yanlış kullanımları belirleyerek hataların erken fark edilmesini sağlar.
• Çift render işlemi yaparak hataları erken tespit eder (Geliştirme modunda).

React 18’den sonra bazı ek işlevler kazanmıştır, ancak yalnızca geliştirme ortamında çalışır ve performansa olumsuz etkisi yoktur.

29. React Testing Library ile nasıl test yapılır?

React Testing Library, React bileşenlerini test etmek için kullanılan bir araçtır.

Avantajları

• Kullanıcı odaklı testler yazmaya olanak tanır.
• Gerçek tarayıcı ortamına daha yakın testler yapılmasını sağlar.
• Jest ile entegre çalışarak test süreçlerini hızlandırır.

React uygulamalarında, bileşenlerin doğru şekilde çalıştığını doğrulamak için bu kütüphane kullanılır.

30. React uygulamalarında güvenlik tehditleri nelerdir ve nasıl önlenir?

React uygulamalarında yaygın güvenlik tehditleri:

1. XSS (Cross-Site Scripting)
   
   • Kullanıcı girdilerini sanitize etmek gerekir.
   • dangerouslySetInnerHTML kullanmaktan kaçınılmalıdır.
2. CSRF (Cross-Site Request Forgery)
   
   • CSRF token kullanımı ile korunabilir.
3. Kötü Amaçlı Bağlantılar (Clickjacking)
   
   • Content Security Policy (CSP) kullanılarak önlenebilir.
4. API Anahtarlarının Açığa Çıkması
   
   • API anahtarlarını çevre değişkenleri (environment variables) içinde saklamak gerekir.

Bu önlemler alınarak React uygulamalarının güvenliği artırılabilir.

React mülakatları oldukça geniş bir konudur. Eğer derinlemesine bir React mülakatına hazırlanıyorsan, Hooks, Redux, Next.js, performans optimizasyonları ve React 18+ özelliklerini detaylıca çalışmalısın.

‍