- Konu sahibi
- #1
Props, bir bileşene dışarıdan gönderilen ve bileşenin kendisi tarafından değiştirilmemesi gereken verilerdir. State ise bileşenin kendi içinde tuttuğu, kullanıcı etkileşimi veya başka bir olay sonucunda güncelleyebildiği veridir. Ayırıcı ölçüt yalnız değerin değişmesi değildir: props da sonraki render’da değişebilir. Değerin sahibi olan bileşen ve güncellemeyi kimin yönettiği önemlidir.
Props, üst bileşenden alt bileşene doğru tek yönlü veri akışının parçasıdır. Alt bileşen props değerini okuyabilir, fakat doğrudan üzerine yazmamalıdır. Yeni bir değer gerektiğinde alt bileşen genellikle üst bileşene bir callback bildirir; değişikliği üst bileşen yapar ve yeni props gönderir.
Bu örnekte
State, bileşenin değişebilen yerel hafızasıdır. React'te state'i güncellemek için setter fonksiyonu kullanılmalıdır. Setter çağrıldığında React bileşeni yeniden çalıştırarak yeni state değerine göre arayüzü günceller.
Bu bileşende
Aynı bileşende ikisi birlikte bulunabilir. Karar verirken verinin sahibi olan bileşeni ve değişikliği kimin yapacağını belirleyin:
Birden fazla kardeş bileşen aynı veriyi kullanacaksa state'i ortak üst bileşene taşımak genellikle daha doğru olur. Üst bileşen state'i yönetir, kardeşlere props olarak gönderir. Böylece iki ayrı bileşende aynı verinin birbirinden kopuk kopyalarını tutma riski azalır.
Örnek parçalar JSX kurulmuş bir projede bileşen tanımlarıdır; Counter’ı örneğin
En sık yapılan hata, her veriyi state yapmaktır. Sabit bir başlık, hesaplanabilen bir toplam veya props'tan doğrudan türetilebilen bir değer için ayrıca state tutmak gereksiz senkronizasyon sorunları doğurabilir. Ters hata da state gerektiren bir değeri normal değişkene koymaktır; normal değişken değişse bile React'in yeniden render edilmesi garanti edilmez.
Üst bileşen yeni bir değer gönderdiğinde alt bileşen yeni props alabilir. Değişen şey alt bileşenin props'u doğrudan değiştirmesi değil, üst bileşenin yeni render sonucunda farklı değer göndermesidir.
Aynı veriye ihtiyaç duyan kardeş bileşenlerin tek bir güncel kaynağı paylaşması için state ortak üst bileşene taşınır. Alt bileşenler bu veriyi props olarak alır.
Dışarıdan gelen başlangıç değerinin bileşen içinde bağımsız olarak düzenlenmesi gerekiyorsa anlamlı olabilir. Ancak sonradan gelen props değişikliklerinin de state'e yansıtılması gerekiyorsa bu ilişki açıkça tasarlanmalı; aksi halde iki farklı veri kaynağı oluşur.
Props nasıl çalışır?
Props, üst bileşenden alt bileşene doğru tek yönlü veri akışının parçasıdır. Alt bileşen props değerini okuyabilir, fakat doğrudan üzerine yazmamalıdır. Yeni bir değer gerektiğinde alt bileşen genellikle üst bileşene bir callback bildirir; değişikliği üst bileşen yapar ve yeni props gönderir.
Kod:
function UserCard({ name, role }) {
return (
<section>
<strong>{name}</strong>
<span>{role}</span>
</section>
);
}
function App() {
return <UserCard name="Ayşe" role="Editör" />;
}Bu örnekte
name ve role UserCard bileşeninin kendi verisi değildir. App tarafından gönderilir. Props nesnesini veya içindeki nesneleri yerinde değiştirmeyin. Destructure edilmiş name parametresine yeniden atamak ise yalnız o yerel bağlamı değiştirir; ebeveynin verisini veya kalıcı React state’ini güncellemez. Yeni değer gerekiyorsa sahibi olan üst bileşene callback ile bildirin.State nasıl çalışır?
State, bileşenin değişebilen yerel hafızasıdır. React'te state'i güncellemek için setter fonksiyonu kullanılmalıdır. Setter çağrıldığında React bileşeni yeniden çalıştırarak yeni state değerine göre arayüzü günceller.
Kod:
import { useState } from "react";
function Counter({ title }) {
const [count, setCount] = useState(0);
return (
<section>
<h2>{title}</h2>
<p>Değer: {count}</p>
<button type="button" onClick={() => setCount(value => value + 1)}>
Artır
</button>
</section>
);
}Bu bileşende
title props'tur; dışarıdan gelir ve Counter tarafından değiştirilmez. count state'tir; butona basıldığında setCount ile değiştirilir. Başarılı sonuç, ekrandaki değerin her tıklamada bir artmasıdır. Değer değişmiyorsa setter yerine doğrudan değişkenin güncellenip güncellenmediğini ve bileşenin gerçekten tarayıcıya render edilip edilmediğini kontrol edin. State'i doğrudan değiştirmek React'in değişikliği güvenilir biçimde algılamamasına yol açabilir.Props ve state'i hangi durumda kullanmalı?
Aynı bileşende ikisi birlikte bulunabilir. Karar verirken verinin sahibi olan bileşeni ve değişikliği kimin yapacağını belirleyin:
| Özellik | Props | State |
|---|---|---|
| Kaynak | Üst bileşen veya dış veri | Bileşenin kendi iç durumu |
| Değiştirme | Alt bileşen doğrudan değiştirmez | Setter ile güncellenir |
| Amaç | Bileşeni yapılandırmak ve veri geçirmek | Etkileşim ve geçici durumu saklamak |
| Örnek | Başlık, kullanıcı adı, tema | Açık/kapalı, sayaç, form alanı |
Birden fazla kardeş bileşen aynı veriyi kullanacaksa state'i ortak üst bileşene taşımak genellikle daha doğru olur. Üst bileşen state'i yönetir, kardeşlere props olarak gönderir. Böylece iki ayrı bileşende aynı verinin birbirinden kopuk kopyalarını tutma riski azalır.
Örnek parçalar JSX kurulmuş bir projede bileşen tanımlarıdır; Counter’ı örneğin
Counter title="Deneme" props’uyla uygulama ağacına ekleyin. State’in korunması bileşenin ağaçtaki kimliğine bağlıdır; tür veya key değişip yeniden oluşturulursa başlangıç state’i tekrar kurulur.Uygulamada izlenecek karar adımları
- Değerin bileşene dışarıdan mı geldiğini sorun. Dışarıdan geliyorsa props olarak tasarlayın.
- Değer kullanıcı etkileşimiyle veya bileşenin çalışması sırasında değişecekse state kullanın.
- Birden fazla bileşen değeri okuyacaksa state'i bu bileşenlerin ortak üst seviyesine taşıyın.
- Alt bileşenin değişiklik isteğini callback prop ile üst bileşene bildirin; props'u doğrudan değiştirmeyin.
- State'i mevcut props'tan kopyalamadan önce bunun gerçekten gerekli olup olmadığını değerlendirin. Kopya değerler zamanla birbirinden farklılaşabilir.
En sık yapılan hata, her veriyi state yapmaktır. Sabit bir başlık, hesaplanabilen bir toplam veya props'tan doğrudan türetilebilen bir değer için ayrıca state tutmak gereksiz senkronizasyon sorunları doğurabilir. Ters hata da state gerektiren bir değeri normal değişkene koymaktır; normal değişken değişse bile React'in yeniden render edilmesi garanti edilmez.
Kaynaklar
Sık sorulan sorular
Props değişebilir mi?
Üst bileşen yeni bir değer gönderdiğinde alt bileşen yeni props alabilir. Değişen şey alt bileşenin props'u doğrudan değiştirmesi değil, üst bileşenin yeni render sonucunda farklı değer göndermesidir.
State neden üst bileşene taşınır?
Aynı veriye ihtiyaç duyan kardeş bileşenlerin tek bir güncel kaynağı paylaşması için state ortak üst bileşene taşınır. Alt bileşenler bu veriyi props olarak alır.
Props'tan state oluşturmak ne zaman anlamlıdır?
Dışarıdan gelen başlangıç değerinin bileşen içinde bağımsız olarak düzenlenmesi gerekiyorsa anlamlı olabilir. Ancak sonradan gelen props değişikliklerinin de state'e yansıtılması gerekiyorsa bu ilişki açıkça tasarlanmalı; aksi halde iki farklı veri kaynağı oluşur.
