### BÖLÜM 1 - Giriş Paragrafı (Hook + Context) Modern web geliştirme dünyasında, kullanıcı deneyimi ve performans beklentileri her geçen gün artıyor. Peki, bu dinamik ortamda hızla değişen ihtiyaçlara nasıl ayak uydurabilir ve ölçeklenebilir uygulamalar geliştirebiliriz? İşte tam da bu noktada **React**, geliştiricilere güçlü ve esnek bir çözüm sunarak fark yaratıyor. Bu kapsamlı 2026 rehberinde, React'in temel prensiplerinden ileri seviye optimizasyon tekniklerine kadar her yönünü A'dan Z'ye öğrenecek, pratik örneklerle kendi projelerinizi geliştirmeye hemen başlayacaksınız. ## React Nedir? (Featured Snippet Target) React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri (UI) oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Bileşen tabanlı mimarisi sayesinde, karmaşık kullanıcı arayüzlerini küçük, yeniden kullanılabilir ve yönetilebilir parçalara ayırarak geliştirme sürecini basitleştirir. React, özellikle tek sayfa uygulamaları (SPA) ve mobil uygulamalar için (React Native ile) tercih edilen, deklaratif ve verimli bir yaklaşımdır. React'in temel amacı, büyük ölçekli ve hızlı değişen veriye sahip uygulamalarda UI geliştirmeyi kolaylaştırmaktır. Sanal DOM (Virtual DOM) kullanarak performansı optimize eder ve yalnızca değişen bileşenleri güncelleyerek tarayıcıdaki DOM manipülasyonunu en aza indirir. Bu sayede, kullanıcı etkileşimlerine anında yanıt veren, akıcı ve yüksek performanslı uygulamalar oluşturmak mümkün olur. Geliştiriciler, React'in güçlü ekosistemi ve geniş topluluk desteği sayesinde her türlü web projesinde React'i güvenle kullanabilirler. ## Neden React Kullanmalısınız? React, modern web geliştirme projeleri için sayısız avantaj sunarak geliştiricilerin ve işletmelerin tercihi olmaya devam ediyor. 2026 itibarıyla, React'in en güncel sürümü olan React 19.x ile birlikte gelen yenilikler, bu kütüphaneyi daha da güçlü kılıyor. Peki, neden React kullanmalısınız? * **Bileşen Tabanlı Mimari:** Uygulamanızı küçük, bağımsız ve yeniden kullanılabilir bileşenlere ayırarak kod tekrarını azaltır, bakımı kolaylaştırır ve geliştirme hızını artırır. Bu, özellikle büyük ve karmaşık projelerde ekip çalışmasını optimize eder. * **Deklaratif Yaklaşım:** React, uygulamanın durumunu tanımlamanıza ve UI'ın bu duruma göre nasıl görünmesi gerektiğini belirtmenize olanak tanır. Durum değiştiğinde, React otomatik olarak UI'ı günceller. Bu, kodunuzu daha öngörülebilir ve hata ayıklamayı daha kolay hale getirir. * **Sanal DOM (Virtual DOM):** Gerçek DOM'u doğrudan manipüle etmek yerine, React önce Sanal DOM üzerinde değişiklikleri uygular. Ardından, Sanal DOM ile gerçek DOM arasındaki farkı hesaplar ve yalnızca gerekli minimum güncellemeleri gerçek DOM'a yansıtır. Bu akıllı karşılaştırma algoritması, özellikle yoğun veri güncellemeleri olan uygulamalarda performansı önemli ölçüde artırır. * **Geniş Ekosistem ve Topluluk Desteği:** React, dünya genelinde milyonlarca geliştirici tarafından aktif olarak kullanılan devasa bir topluluğa sahiptir. Bu, karşılaştığınız herhangi bir sorun için hızlıca çözüm bulabileceğiniz, zengin bir kaynak ve kütüphane ekosistemine erişebileceğiniz anlamına gelir. npm üzerinde binlerce hazır bileşen ve araç mevcuttur. * **Öğrenme Eğrisi ve İş İmkanları:** React'in temel prensipleri nispeten hızlı öğrenilebilir. JSX, bileşenler ve state yönetimi gibi kavramları kavradıktan sonra, kısa sürede üretken olmaya başlayabilirsiniz. Ayrıca, React geliştiricilerine olan talep 2026 yılında da oldukça yüksek seyretmektedir, bu da kariyer fırsatları açısından önemli bir avantajdır. * **Server-Side Rendering (SSR) ve Static Site Generation (SSG) Desteği:** Next.js gibi çerçevelerle entegrasyonu sayesinde, React uygulamalarınızın SEO performansını artırabilir ve ilk yükleme sürelerini optimize edebilirsiniz. Bu, kullanıcı deneyimi ve arama motoru sıralamaları için kritik öneme sahiptir. Kimler için uygun? React, küçük tek sayfa uygulamalarından büyük ölçekli kurumsal projelere, e-ticaret sitelerinden sosyal medya platformlarına kadar geniş bir yelpazedeki uygulamalar için idealdir. Özellikle dinamik veri gösterimi ve karmaşık kullanıcı etkileşimleri gerektiren projelerde React'in gücü ortaya çıkar. Kimler için uygun değil? Çok basit, statik web siteleri için fazladan bir karmaşıklık getirebilir; bu tür projelerde daha hafif çözümler tercih edilebilir. ## React vs Alternatifler (Karşılaştırma Tablosu) React, modern JavaScript çerçeveleri arasında lider konumda olsa da, Vue.js ve Angular gibi güçlü alternatifleri de bulunmaktadır. Her birinin kendine özgü avantajları ve kullanım alanları vardır. İşte 2026 itibarıyla bu üç popüler teknolojinin karşılaştırması: | Özellik | React (19.x) | Angular (17.x) | Vue.js (3.x) | | :---------------- | :----------------------------------------------- | :------------------------------------------------- | :------------------------------------------------ | | **Türü** | UI Kütüphanesi | Tam Teşekküllü Çerçeve | Aşamalı Geliştirilebilir Çerçeve | | **Öğrenme Eğrisi**| Orta (JSX ve Hooks gerektirir) | Yüksek (TypeScript, RxJS, CLI, modüller) | Düşük (Basit API, sezgisel yapı) | | **Ekosistem** | Çok geniş, esnek kütüphane seçimi | Kapsamlı, entegre araçlar ve kütüphaneler | Geniş, resmi kütüphanelerle iyi entegrasyon | | **Topluluk** | En büyük ve en aktif topluluklardan biri | Geniş ve kurumsal destekli topluluk | Hızla büyüyen ve aktif topluluk | | **Kurumsal Destek**| Meta (eski Facebook) ve geniş endüstri desteği | Google tarafından aktif geliştirme ve destek | Bağımsız ve topluluk odaklı | | **Kullanım Alanı**| Tek sayfa uygulamaları, mobil (React Native) | Kurumsal uygulamalar, büyük ölçekli projeler | Küçük/orta ölçekli projeler, prototipleme | | **Veri Yönetimi** | Esnek (Context API, Redux, Zustand) | RxJS ile entegre, güçlü durum yönetimi | Vuex (Pinia) ile entegre, basit ve etkili | Bu tabloya baktığımızda, React'in esnekliği ve bileşen tabanlı yapısıyla öne çıktığını görüyoruz. Angular, kurumsal düzeyde entegre çözümler sunarken, Vue.js öğrenme kolaylığı ve aşamalı entegrasyon yeteneği ile dikkat çekiyor. Seçiminiz, projenizin büyüklüğüne, ekibinizin deneyimine ve özel gereksinimlerinize bağlı olacaktır. ## Kurulum ve İlk Adımlar React ile geliştirme yapmaya başlamak oldukça kolaydır. Modern React projeleri genellikle Vite veya Create React App (CRA) gibi araçlarla başlatılır. 2026 itibarıyla, Vite daha hızlı geliştirme deneyimi sunduğu için birçok geliştirici tarafından tercih edilmektedir. İşte adım adım kurulum ve ilk projenizi oluşturma süreci: **Ön Gereksinimler:** * **Node.js (LTS sürümü):** Geliştirme ortamınızda Node.js ve npm (Node Package Manager) yüklü olmalıdır. Node.js'in en güncel LTS (Uzun Süreli Destek) sürümünü [resmi web sitesinden](https://nodejs.org/en/) indirebilirsiniz. * **Kod Düzenleyici:** Visual Studio Code (VS Code) gibi bir kod düzenleyici kullanmanız önerilir. 1. **Vite ile Yeni Bir React Projesi Oluşturma:** Terminalinizi açın ve aşağıdaki komutu çalıştırın. `my-react-app` yerine projenizin adını yazabilirsiniz. ```bash npm create vite@latest my-react-app -- --template react # veya yarn kullanıyorsanız # yarn create vite my-react-app --template react ``` Bu komut, Vite'ı kullanarak yeni bir React projesi şablonu oluşturacaktır. TypeScript kullanmak isterseniz `--template react-ts` kullanabilirsiniz. 2. **Proje Dizine Gitme:** Projenizin oluşturulduğu dizine geçmek için aşağıdaki komutu kullanın: ```bash cd my-react-app ``` 3. **Bağımlılıkları Yükleme:** Projenin bağımlılıklarını (React, React DOM vb.) yüklemek için aşağıdaki komutu çalıştırın: ```bash npm install # veya yarn kullanıyorsanız # yarn install ``` 4. **Geliştirme Sunucusunu Başlatma:** Uygulamanızı yerel geliştirme sunucusunda çalıştırmak için aşağıdaki komutu kullanın: ```bash npm run dev # veya yarn kullanıyorsanız # yarn dev ``` Bu komut, genellikle `http://localhost:5173` adresinde erişilebilir bir geliştirme sunucusu başlatacaktır. Tarayıcınızda bu adresi ziyaret ederek ilk React uygulamanızı görebilirsiniz. > **Pro Tip:** Vite, anında modül yenileme (Hot Module Replacement - HMR) sayesinde kodunuzda yaptığınız değişiklikleri tarayıcıyı yenilemeden anında görmenizi sağlar, bu da geliştirme sürecini inanılmaz hızlandırır. ## Temel Kullanım ve Örnekler React'in gücü, bileşenler (components) ve bu bileşenlerin durumunu (state) yönetme yeteneğinden gelir. İşte React'in temel yapı taşlarını anlamanıza yardımcı olacak pratik örnekler: **1. Fonksiyonel Bileşen Oluşturma:** React'te modern uygulamalar genellikle fonksiyonel bileşenlerle yazılır. Bu bileşenler, JavaScript fonksiyonlarıdır ve JSX döndürürler. * **Problem:** Basit bir karşılama mesajı göstermek. * **Çözüm:** `Merhaba` mesajını gösteren bir fonksiyonel bileşen. ```javascript // src/components/Merhaba.jsx import React from 'react'; function Merhaba() { return

Merhaba, React Dünyası!

; } export default Merhaba; ``` ```javascript // src/App.jsx import React from 'react'; import Merhaba from './components/Merhaba'; function App() { return ( ); } export default App; ``` **2. Props Kullanımı (Veri Aktarımı):** Bileşenler arası veri aktarımı `props` (properties) aracılığıyla yapılır. Bu, bileşenleri daha dinamik ve yeniden kullanılabilir hale getirir. * **Problem:** Farklı isimlerle karşılama mesajları göstermek. * **Çözüm:** `isim` prop'u alan bir `KullaniciKarsilama` bileşeni. ```javascript // src/components/KullaniciKarsilama.jsx import React from 'react'; function KullaniciKarsilama(props) { return

Merhaba, {props.isim}!

; } export default KullaniciKarsilama; ``` ```javascript // src/App.jsx import React from 'react'; import KullaniciKarsilama from './components/KullaniciKarsilama'; function App() { return ( ); } export default App; ``` **3. State Yönetimi (useState Hook):** React uygulamalarında dinamik verileri yönetmek için `state` kullanılır. Fonksiyonel bileşenlerde `useState` Hook'u ile durum yönetimi yapılır. * **Problem:** Bir butona tıklandığında sayacı artırmak. * **Çözüm:** `useState` kullanarak bir sayaç bileşeni. ```javascript // src/components/Sayac.jsx import React, { useState } from 'react'; function Sayac() { const [sayi, setSayi] = useState(0); // Başlangıç değeri 0 const artir = () => { setSayi(sayi + 1); }; return ( ); } export default Sayac; ``` ```javascript // src/App.jsx import React from 'react'; import Sayac from './components/Sayac'; function App() { return ( ); } export default App; ``` **4. Olay Yönetimi (Event Handling):** Kullanıcı etkileşimlerini (tıklama, form gönderme vb.) yönetmek, React uygulamalarının temelidir. * **Problem:** Bir metin giriş alanına yazılan değeri anında göstermek. * **Çözüm:** `onChange` olayı ve `useState` kullanarak bir giriş alanı. ```javascript // src/components/GirisAlani.jsx import React, { useState } from 'react'; function GirisAlani() { const [deger, setDeger] = useState(''); const handleChange = (event) => { setDeger(event.target.value); }; return ( ); } export default GirisAlani; ``` ```javascript // src/App.jsx import React from 'react'; import GirisAlani from './components/GirisAlani'; function App() { return ( ); } export default App; ``` **5. Liste Oluşturma (List Rendering):** Veri dizilerini (array) liste olarak göstermek sıkça karşılaşılan bir senaryodur. React'te `map()` metodu kullanılır ve her liste öğesine benzersiz bir `key` prop'u verilmelidir. * **Problem:** Bir kullanıcı listesini göstermek. * **Çözüm:** Kullanıcı adlarından oluşan bir listeyi `map` ile render etmek. ```javascript // src/components/KullaniciListesi.jsx import React from 'react'; function KullaniciListesi() { const kullanicilar = ['Alice', 'Bob', 'Charlie', 'David']; return ( ); } export default KullaniciListesi; ``` ```javascript // src/App.jsx import React from 'react'; import KullaniciListesi from './components/KullaniciListesi'; function App() { return ( ); } export default App; ``` Bu temel örnekler, React'in component tabanlı yapısını, veri akışını ve durum yönetimini anlamanıza yardımcı olacaktır. İleri seviye konulara geçmeden önce bu kavramları iyice pekiştirmeniz önemlidir. ## İleri Seviye Teknikler React'te ustalaşmak, temel kavramların ötesine geçmeyi ve uygulamanızın performansını, ölçeklenebilirliğini ve bakımını artıran ileri seviye teknikleri anlamayı gerektirir. 2026'da modern React geliştiricileri için olmazsa olmaz bazı teknikler şunlardır: ### 1. Custom Hooks (Özel Hook'lar) Kod tekrarını azaltmak ve bileşenler arasında durum mantığını yeniden kullanmak için kendi özel Hook'larınızı oluşturabilirsiniz. Bu, bileşenlerinizi daha temiz ve odaklı tutmanıza yardımcı olur. * **Problem:** Bir API'den veri çekme mantığını birden fazla bileşende kullanmak. * **Çözüm:** `useFetch` adında özel bir Hook oluşturmak. ```javascript // src/hooks/useFetch.js import { useState, useEffect } from 'react'; function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const result = await response.json(); setData(result); } catch (err) { setError(err); } finally { setLoading(false); } }; fetchData(); }, [url]); // url değiştiğinde tekrar çalıştır return { data, loading, error }; } export default useFetch; ``` ```javascript // src/components/VeriCekici.jsx import React from 'react'; import useFetch from '../hooks/useFetch'; function VeriCekici() { const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/todos/1'); if (loading) return

Yükleniyor...

; if (error) return

Hata: {error.message}

; return ( ); } export default VeriCekici; ``` ### 2. Context API (Küresel Durum Yönetimi) Prop drilling (prop'ları birden fazla seviyeden geçirme) sorununu çözmek için Context API'yi kullanabilirsiniz. Bu, verileri bileşen ağacında derinlere aktarmak için idealdir. * **Problem:** Temayı (açık/koyu) uygulamanın birçok farklı bileşenine aktarmak. * **Çözüm:** `TemaContext` oluşturarak temayı global olarak yönetmek. ```javascript // src/context/TemaContext.js import React, { createContext, useState, useContext } from 'react'; const TemaContext = createContext(); export const TemaSaglayici = ({ children }) => { const [tema, setTema] = useState('light'); const temayiDegistir = () => { setTema(prevTema => (prevTema === 'light' ? 'dark' : 'light')); }; return ( {children} ); }; export const useTema = () => useContext(TemaContext); ``` ```javascript // src/components/TemaButonu.jsx import React from 'react'; import { useTema } from '../context/TemaContext'; function TemaButonu() { const { tema, temayiDegistir } = useTema(); return ( Temayı {tema === 'light' ? 'Koyu' : 'Açık'} Yap ); } export default TemaButonu; ``` ```javascript // src/App.jsx import React from 'react'; import { TemaSaglayici } from './context/TemaContext'; import TemaButonu from './components/TemaButonu'; import { useTema } from './context/TemaContext'; // App bileşeninde de temayı kullanmak için function AppContent() { const { tema } = useTema(); return ( ); } function App() { return ( ); } export default App; ``` ### 3. Redux veya Zustand (Daha Karmaşık Durum Yönetimi) Büyük ve karmaşık uygulamalarda, Context API'nin yetersiz kaldığı durumlarda Redux, Zustand veya Jotai gibi daha güçlü durum yönetim kütüphaneleri tercih edilebilir. 2026'da Zustand, basitliği ve performansıyla popülerliğini artırmıştır. ### 4. Router (React Router v6.x) Tek sayfa uygulamalarında farklı URL'lere göre farklı bileşenleri göstermek için bir yönlendirme kütüphanesi gereklidir. React Router, bu alandaki de facto standarttır. * **Problem:** Uygulamada farklı sayfalar arasında gezinme sağlamak. * **Çözüm:** React Router v6.x kullanarak temel yönlendirme. ```bash npm install react-router-dom@6 ``` ```javascript // src/App.jsx import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; const Home = () =>

Ana Sayfa

; const About = () =>

Hakkımızda

; const Contact = () =>

İletişim

; function App() { return ( } /> } /> } /> ); } export default App; ``` ### 5. Performans Optimizasyonu için `React.memo`, `useCallback`, `useMemo` Bileşenlerin gereksiz yere yeniden render edilmesini önleyerek performansı artırmak için bu Hook'lar ve HOC (Higher-Order Component) kullanılır. * `React.memo`: Bir bileşenin props'ları değişmediği sürece yeniden render edilmesini engeller. * `useCallback`: Fonksiyon referanslarının gereksiz yere yeniden oluşturulmasını engeller. * `useMemo`: Hesaplaması maliyetli değerlerin gereksiz yere yeniden hesaplanmasını engeller. ```javascript // src/components/OptimizedComponent.jsx import React, { useState, useCallback, useMemo } from 'react'; const ExpensiveCalculation = React.memo(({ value }) => { console.log('ExpensiveCalculation rendered'); // Ağır bir hesaplama simülasyonu const result = useMemo(() => { let sum = 0; for (let i = 0; i < 10000000; i++) { sum += i; } return sum + value; }, [value]); return

Hesaplama Sonucu: {result}

; }); function OptimizedParent() { const [count, setCount] = useState(0); const [text, setText] = useState(''); const increment = useCallback(() => { setCount(prevCount => prevCount + 1); }, []); // Bağımlılık dizisi boş olduğu için fonksiyon sadece bir kez oluşturulur return ( ); } export default OptimizedParent; ``` Bu örnekte, `ExpensiveCalculation` bileşeni yalnızca `value` prop'u değiştiğinde yeniden render edilir. `increment` fonksiyonu ise `useCallback` sayesinde sadece bir kez oluşturulur ve gereksiz render'ları tetiklemez. ## Best Practices & Anti-Patterns React uygulamalarınızı geliştirirken belirli en iyi uygulamaları takip etmek, kodunuzun kalitesini, performansını ve sürdürülebilirliğini artırır. Aynı zamanda kaçınmanız gereken anti-pattern'ları bilmek de önemlidir. ### ✅ Doğru Yaklaşımlar * **Bileşenleri Küçük ve Odaklı Tutun:** Her bileşen tek bir işi yapmalı ve tek bir sorumluluğu olmalıdır. Bu, test edilebilirliği ve yeniden kullanılabilirliği artırır. * **State'i Gerektiği Yerde Tutun:** State'i mümkün olduğunca düşük seviyeli bileşenlerde tutmaya çalışın ve yalnızca gerektiğinde üst bileşenlere taşıyın (lifting state up). * **Prop Drilling Yerine Context API veya Durum Yönetim Kütüphaneleri Kullanın:** Üç veya daha fazla seviyeden prop geçirmeniz gerekiyorsa, bu bir Context API veya Redux/Zustand kullanmanız gerektiğinin işaretidir. * **`key` Prop'unu Doğru Kullanın:** Liste öğeleri için benzersiz ve stabil `key` prop'ları kullanın (genellikle veritabanı ID'leri). `index` kullanmaktan kaçının, özellikle liste öğelerinin sırası değişebiliyorsa veya filtreleme/ekleme/silme işlemleri yapılıyorsa. * **Immutable State Güncellemeleri Yapın:** Doğrudan state objesini değiştirmek yerine, `setState` fonksiyonu ile yeni bir obje veya dizi döndürerek state'i güncelleyin. Örneğin, `[...prevState, newItem]` veya `{...prevState, key: value}`. * **Hata Sınırlarını (Error Boundaries) Kullanın:** Uygulamanızın bir bölümündeki hataların tüm uygulamayı çökertmesini önlemek için hata sınırları tanımlayın. Bu, kullanıcı deneyimini iyileştirir. * **Erişilebilirlik (Accessibility) Odaklı Geliştirin:** Anlamsal HTML kullanın, `aria` niteliklerini gerektiği yerde ekleyin ve klavye navigasyonunu destekleyin. Tüm kullanıcılar için erişilebilir uygulamalar oluşturmak kritik öneme sahiptir. * **Kod Bölme (Code Splitting) ve Lazy Loading Kullanın:** Büyük uygulamalarda, tüm kodun ilk yüklemede indirilmesini önlemek için `React.lazy()` ve `Suspense` ile kod bölme yapın. Bu, ilk yükleme süresini önemli ölçüde azaltır. ### ❌ Kaçınılması Gereken Anti-Pattern'lar * **Doğrudan DOM Manipülasyonu:** React'in sanal DOM'unu atlayarak doğrudan `document.getElementById` gibi yöntemlerle DOM'u manipüle etmekten kaçının. Bu, React'in performans optimizasyonlarını bozar. * **`useEffect` Sonsuz Döngüleri:** `useEffect` Hook'unun bağımlılık dizisini yanlış yapılandırmak sonsuz render döngülerine yol açabilir. `console.log` kullanarak hangi değerlerin değiştiğini takip edin. * **`props`'u State'e Kopyalama:** Bir prop'u doğrudan bir bileşenin state'ine kopyalamak genellikle gereksizdir ve senkronizasyon sorunlarına yol açabilir. Genellikle prop'u doğrudan kullanın veya türetilmiş state'i tercih edin. * **Çok Büyük Bileşenler:** Tek bir dosya içinde yüzlerce satırlık kod içeren bileşenlerden kaçının. Bileşenleri daha küçük, yönetilebilir parçalara ayırın. * **`setState` İçinde Side Effect'ler:** `setState` çağrısının doğrudan içinde veya render döngüsü sırasında yan etkiler (API çağrıları, DOM manipülasyonu) oluşturmaktan kaçının. Bu tür işlemler `useEffect` içinde yapılmalıdır. * **Gereksiz Yeniden Render'lar:** Performans sorunlarına yol açabilir. `React.memo`, `useCallback`, `useMemo` gibi araçları doğru kullanarak gereksiz render'ları önleyin. > **Güvenlik Notu:** React'in kendisi XSS (Cross-Site Scripting) saldırılarına karşı koruma sağlar (JSX otomatik olarak kaçar). Ancak, API'lerden gelen verileri doğrudan `dangerouslySetInnerHTML` ile render ederken veya dış kaynaklardan gelen URL'leri kullanırken dikkatli olun. Her zaman kullanıcı girdisini sanitize edin ve güvenilir kaynaklardan geldiğinden emin olun. ## Yaygın Hatalar ve Çözümleri React geliştirirken karşılaşabileceğiniz bazı yaygın hatalar ve bunların nasıl çözüleceği aşağıda açıklanmıştır. Bu sorunlar genellikle Stack Overflow gibi platformlarda sıkça sorulanlar arasındadır. 1. **Hata: `Each child in a list should have a unique 'key' prop.`** * **Sebep:** Bir liste (örneğin `map` ile oluşturulan `

` veya `

` elementleri) render edilirken her öğeye benzersiz bir `key` prop'u verilmemesi. React, bu `key`leri bileşenlerin kimliğini takip etmek ve verimli güncellemeler yapmak için kullanır. * **Çözüm:** Liste öğeleri için benzersiz ve stabil bir kimlik sağlayın. Eğer verilerinizin benzersiz bir ID'si varsa onu kullanın. Yoksa, geçici olarak `index` kullanabilirsiniz ama bu, liste öğelerinin sırası değiştiğinde veya yeni öğeler eklendiğinde sorunlara yol açabilir. ```javascript // Yanlış

{items.map(item =>
• {item.name}
)}

// Doğru (ID varsa)

{items.map(item =>
• {item.name}
)}

// Doğru (ID yoksa, dikkatli kullanılmalı)

{items.map((item, index) =>
• {item.name}
)}

``` 2. **Hata: `Can't perform a React state update on an unmounted component.`** * **Sebep:** Bir bileşen DOM'dan kaldırıldıktan (unmount) sonra, o bileşenin state'ini güncellemeye çalışmak. Bu genellikle bir `useEffect` içinde zamanlayıcılar (setTimeout, setInterval) veya asenkron API çağrıları kullanıldığında meydana gelir. * **Çözüm:** `useEffect` içinde bir temizleme (cleanup) fonksiyonu kullanarak bileşen unmount edildiğinde asenkron işlemleri veya zamanlayıcıları iptal edin. ```javascript useEffect(() => { let isMounted = true; // Bileşenin mount durumunu takip et fetchData().then(data => { if (isMounted) { setData(data); } }); return () => { isMounted = false; // Temizleme sırasında false yap }; }, []); ``` 3. **Hata: `Objects are not valid as a React child (found: object with keys {a, b}). If you meant to render a collection of children, use an array instead.`** * **Sebep:** JSX içinde doğrudan bir JavaScript objesini render etmeye çalışmak. React, JSX içinde string, number, boolean, null, undefined veya React elementleri/bileşenleri bekler. * **Çözüm:** Objelerin render edilebilir özelliklerini (örneğin string değerlerini) gösterin veya objeyi string'e dönüştürün. Genellikle objenin belirli bir özelliğini göstermek istersiniz. ```javascript // Yanlış const user = { name: 'Alice', age: 30 }; return

{user}

; // Doğru return

İsim: {user.name}, Yaş: {user.age}

; // Debug amaçlı return

{JSON.stringify(user, null, 2)}

; ``` 4. **Hata: `Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside useEffect or useLayoutEffect.`** * **Sebep:** `useEffect` Hook'unun bağımlılık dizisini yanlış yapılandırmak veya state güncelleme fonksiyonunu doğrudan `useEffect` içinde bağımlılık olmadan çağırmak, sonsuz bir döngüye yol açar. Örneğin, `useEffect(() => { setState(value); }, [state]);` gibi bir yapı, `state` değiştiğinde tekrar `setState`'i tetikler. * **Çözüm:** `useEffect`'in bağımlılık dizisini dikkatlice kontrol edin. Eğer bir state'i güncelliyorsanız ve bu state `useEffect`'in bağımlılıkları arasındaysa, güncelleme fonksiyonunun içindeki mantığın bir koşula bağlı olduğundan veya `setState`'in fonksiyonel formunu kullandığınızdan emin olun (`setCount(prevCount => prevCount + 1)`). ```javascript // Yanlış: state her değiştiğinde tekrar çağrılır useEffect(() => { setCount(count + 1); }, [count]); // Doğru: Sadece mount edildiğinde bir kez çalışır useEffect(() => { console.log('Bileşen yüklendi'); }, []); // Doğru: Fonksiyonel güncelleme ile sonsuz döngüden kaçınma useEffect(() => { const interval = setInterval(() => { setCount(prevCount => prevCount + 1); }, 1000); return () => clearInterval(interval); }, []); // Bağımlılık yok, sadece bir kez çalışır ``` Bu hataları anlamak ve çözmek, daha sağlam ve hatasız React uygulamaları geliştirmenize yardımcı olacaktır. ## Performans Optimizasyonu React uygulamalarında performans, kullanıcı deneyimi ve SEO açısından kritik öneme sahiptir. Yavaş yüklenen veya takılan bir uygulama, kullanıcıların sitenizden ayrılmasına neden olabilir. İşte 2026'da React uygulamalarınızın performansını artırmak için kullanabileceğiniz bazı kanıtlanmış teknikler: 1. **Kod Bölme (Code Splitting) ve Lazy Loading:** Uygulamanız büyüdükçe, tüm JavaScript kodunu tek bi