State'i yukarı kaldırmak ne anlama gelir?

Question

Accepted Answer

**State'i yukarı kaldırmak**, state'i alt bileşenden bir **ortak ebeveyine** taşımak anlamına gelir, böylece birden fazla alt bileşen aynı veriye sahip olabilir ve senkronize kalabilir. Kardeş bileşenlerin koordine edilmesi gerektiğinde bu standart çözümdür. ## Sorun: kardeş bileşenlerin paylaşılan verileri gerekir ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` İki kardeş bileşenin her biri ilgili state'in kendi kopyasını tutarsa, bunları tutarlı tutmanın hiç bir yolu yoktur — birisini değiştirmek diğerini etkilemez. ## Çözüm: state'i ebeveyne kaldırın ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` Paylaşılan state artık ebeveyinde (`Calculator`) yaşıyor. Değeri *aşağıya* prop ve setter olarak gönderir, böylece alt bileşenler değişiklikleri talep edebilir (*yukarı*). Şimdi her iki giriş alanı aynı kaynağı yansıtır — birini düzenlemek her ikisini günceller. ## Desen ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` Bu, state'i paylaşılmış hale getirmek için uygulanmış, aynı "veriler aşağıya, olaylar yukarı" akışıdır. ## Kaldırma çok ileri gidince ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## Neden önemli State'i yukarı kaldırmak, bileşen tabanlı çerçevelerde **kardeş/ilişkili bileşenler arasında state paylaşımının** temel tekniğidir — ortak ebeveynde tek bir gerçek kaynağı tutar, böylece alt bileşenler senkronize kalır. Genellikle Context veya bir store eklemeden önce ulaşılacak *ilk* araçtır. Ne zaman kaldırılacağını bilmek (kardeşlerin koordine edilmesi gerekir) — ve kaldırma çok ileri gittiğinde (prop drilling'e neden olur, bu yüzden Context/store zamanı gelir) — bileşen state'ini iyi yapılandırmak için temeldir.