React İle Bileşenler Arası Veri Aktarımı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu eğitimdeki örnekleri uygulayabilmek için bilgisayarınızda Node.js (güncel LTS sürümü) yüklü olmalıdır. Projeyi başlatmak için terminalinizde aşağıdaki komutları kullanabilirsiniz.

npx create-react-app veri-aktarimi-rehberi
cd veri-aktarimi-rehberi
npm start

Projeniz hazır olduğunda, kod editörünüzü (VS Code önerilir) açarak bileşen yapınızı oluşturmaya başlayabilirsiniz. Bu rehberde fonksiyonel bileşenler (functional components) ve React Hooks yapısı esas alınmıştır.

Props Kullanarak Üstten Alta Veri Aktarımı

React'te veri aktarımının en temel yöntemi "Props" (properties) kullanımıdır. Bu yöntem, verinin ebeveyn (parent) bileşenden çocuk (child) bileşene tek yönlü olarak aktarılmasını sağlar.

// EbeveynBilesen.js
import CocukBilesen from './CocukBilesen';

function EbeveynBilesen() {
  const veri = "Merhaba, bu veri üst bileşenden geldi!";
  return ;
}

Yukarıdaki örnekte, mesaj isimli bir prop tanımlayarak veriyi alt bileşene gönderiyoruz. Bu yöntem, bileşen ağacının derinliği arttıkça "prop drilling" (veriyi kullanmayacak bileşenlerden geçirme) sorununa yol açabilir.

Geriye Doğru Veri Aktarımı: Callback Fonksiyonları

Alt bileşenden üst bileşene veri göndermek için, üst bileşende tanımlanan bir fonksiyonun prop olarak alt bileşene aktarılması gerekir. Bu, React'in tek yönlü veri akışı prensibine uygundur.

// CocukBilesen.js
function CocukBilesen({ onVeriGonder }) {
  return  onVeriGonder("Veri üst bileşene ulaştı!")}>Gönder;
}

Burada onVeriGonder fonksiyonunu kullanarak alt bileşenden üst bileşene bir tetikleyici ve veri gönderiyoruz. Bu yöntem, form yönetimi gibi işlemlerde oldukça yaygındır.

Context API ile Global Veri Yönetimi

Bileşen ağacının çok derin olduğu durumlarda, her seviyede prop geçirmek yerine Context API kullanılır. Context, veriyi tüm bileşen ağacına "enjekte etmenizi" sağlar.

// VeriContext.js
import { createContext } from 'react';
export const KullaniciContext = createContext(null);

// App.js

  

Context API, tema ayarları veya kullanıcı oturum bilgileri gibi tüm uygulamada erişilmesi gereken veriler için idealdir. Ancak, çok sık değişen veriler için performans kaybına neden olabilir.

Bileşenler Arası Veri Aktarımı Yöntemleri Karşılaştırması

Kritik Uyarılar ve Güvenlik

Dikkat: Bileşenler arası veri aktarımı yaparken, hassas verileri (şifreler, API anahtarları) doğrudan prop olarak geçirmeyin. XSS (Cross-Site Scripting) saldırılarına karşı, kullanıcıdan gelen verileri mutlaka sanitize edin (temizleyin). Ayrıca, gereksiz Context güncellemeleri uygulamanızın yavaşlamasına neden olabilir; useMemo ve useCallback kancalarını yerinde kullanarak render performansını optimize edin.

Sıkça Sorulan Sorular

Prop Drilling nedir ve nasıl önlenir?

Prop drilling, verinin kullanılmadığı ara bileşenler üzerinden geçirilmesidir. Bunu önlemek için Context API veya durum yönetimi kütüphaneleri (Zustand gibi) kullanmalısınız.

Context API her zaman kullanılmalı mı?

Hayır, sadece uygulamanın genelinde ihtiyaç duyulan veriler (dil, tema, kullanıcı bilgisi) için kullanılmalıdır. Yerel durumlar için props yeterlidir.

Bileşenler arası veri aktarımında performans nasıl korunur?

Gereksiz render işlemlerini engellemek için React.memo kullanabilir ve veriyi güncellerken mümkün olduğunca lokal tutmaya çalışabilirsiniz.

İki kardeş bileşen birbirine nasıl veri gönderir?

Kardeş bileşenler doğrudan veri gönderemez. Veriyi ortak bir ebeveyn bileşende tutmalı veya bir global durum yönetim aracı kullanmalısınız.

2026 standartlarında en iyi yöntem hangisidir?

Modern React uygulamalarında basit veriler için props, global veriler için Context API ve karmaşık uygulama durumu için hafif durum yönetim kütüphaneleri (Zustand vb.) tercih edilmektedir.

Zustand ile Merkezi Durum Yönetimine Geçiş

React ekosisteminde 2026 standartları, Context API'nin performans darboğazlarını aşmak için Zustand gibi atomik ve hafif kütüphanelerin kullanımını önermektedir. Zustand, karmaşık veri akışlarında bileşenlerin gereksiz yere yeniden render edilmesini (re-render) engeller ve daha az kodla daha fazla iş yapmanızı sağlar.

Zustand Kurulumu ve Temel Kullanım

Zustand'ı projenize dahil etmek için npm install zustand komutunu kullanabilirsiniz. Ardından, uygulamanızın herhangi bir yerinden erişilebilecek merkezi bir "store" oluşturun:

import { create } from 'zustand';

const useStore = create((set) => ({
  user: 'Misafir',
  updateUser: (newName) => set({ user: newName }),
}));

export default useStore;

Bu yapıyı herhangi bir bileşende şu şekilde kullanabilirsiniz:

function UserProfile() {
  const { user, updateUser } = useStore();
  return (
    

      




Kullanıcı: {user}
       updateUser('Ahmet')}>İsmi Güncelle
    
  );
}

Bileşenler Arası Veri Aktarımında Hata Ayıklama (Debugging)

Veri aktarımı sırasında yaşanan en büyük sorunlardan biri, verinin "undefined" dönmesi veya beklenmedik anda güncellenmesidir. Bu tür durumları tespit etmek için React DevTools ve özel "hook" yapıları kullanılmalıdır.

İleri Düzey İzleme Teknikleri

Veri akışını izlemek için bileşenlerinize useEffect kancaları ile loglama mekanizmaları eklemek, hangi props'un ne zaman değiştiğini görmenizi sağlar:

import { useEffect } from 'react';

function DataWatcher({ data }) {
  useEffect(() => {
    console.log('Yeni veri alındı:', data);
  }, [data]);

  return 
{data}
;
}

Ayrıca, büyük projelerde veri akışının takibini kolaylaştırmak için aşağıdaki tabloyu baz alarak veri stratejinizi belirleyebilirsiniz:

Performans Odaklı İpuçları

• Memoization: Veri aktarımı sırasında React.memo, useMemo ve useCallback kullanarak gereksiz render işlemlerini engelleyin.
• Prop Drilling'i Azaltın: Eğer bir veriyi 3'ten fazla katman aşağı aktarıyorsanız, mutlaka Context API veya Zustand'a geçiş yapın.
• Atomik Yapılar: Verilerinizi tek bir devasa nesne yerine, küçük ve yönetilebilir parçalara (atomlara) bölün.

Sonuç

React ile bileşenler arası veri aktarımı, uygulamanızın ölçeklenebilirliği için hayati bir beceridir. Basit senaryolarda Props, orta ölçekli ağaçlarda Context API ve büyük projelerde merkezi durum yönetimi araçlarını kullanmak, kodunuzun temiz ve sürdürülebilir kalmasını sağlar. Bir sonraki adım olarak, Zustand kütüphanesini inceleyerek merkezi durum yönetimi üzerine pratik yapmanızı öneririm.

Not: Bu makaledeki kod örnekleri eğitim amaçlıdır ve üretim ortamına (production) almadan önce gerekli güvenlik testlerinden geçirilmelidir.