React'ta state yönetimi, uygulamalarda veri akışını yönetmek için kullanılan önemli bir kavramdır State, bir component'in içindeki veri öğelerini saklamak için kullanılan bir değişkendir ve uygulamanın verimliliği ve performansı açısından son derece önemlidir State yönetimi yapılırken dikkat edilmesi gereken ilkeler bulunmaktadır, bunlar arasında en önemlisi Single source of truth prensibidir Ayrıca, React'ta state'i props'tan ayırmak da önemlidir Componentler arası iletişimde props drilling ve context API kullanılabilir ya da state yönetiminde Redux ve MobX gibi kütüphanelerden yararlanılabilir Bu sayede, uygulamalar daha öngörülebilir, hatasız ve sürdürülebilir hale gelir

React'ta state yönetimi, komponentler arasında veri akışını yönetmek için oldukça önemlidir. React'ta state, bir komponentin içindeki veri öğelerini saklamak için kullanılan bir değişkendir. Bu veri öğelerine erişmek ve yönetmek, uygulamaların çalışmasında büyük rol oynayan unsurlar arasındadır.

State yönetimi, uygulamanın verimliliği ve performansı açısından son derece önemlidir. Aynı zamanda, bir component'in diğer componentlerle iletişim kurmasını sağlar ve uygulamaların daha öngörülebilir hale gelmesini sağlar. Ayrıca, state yönetimi, uygulama üzerindeki kontrolü artırarak daha da geliştirilebilir ve ölçeklenebilir hale getirir.

React'ta state yönetimi sayesinde, uygulamaların daha güvenli hale gelmesi ve hataların önüne geçilmesi mümkün olabiliyor. Uygulamanın bütününü yönetmek yerine, her bir komponentteki state'i yönetmek, hatasız kodlama ve uygulama tasarlamak açısından son derece yararlıdır. Bu sayede, daha az hatalı kod yazıp uygulama geliştirme sürecinde zaman kazanmış olursunuz.

State Nedir?

React, günümüzün en popüler JavaScript kütüphanelerinden biridir ve modern web uygulamalarının olmazsa olmaz bir parçasıdır. React, component tabanlı bir yaklaşım sunar ve her component kendi durumunu(state) yönetebilir.

State, bir component'in içindeki değişkenlerin değerlerini tutar. State, componentleri interaktif hale getirir ve uygulamanın dinamik davranmasını sağlar. Örneğin, bir butona basılması sonrasında sayfa yenilendiğinde, state değerleri değişecektir ve bu da kullanıcı arayüzünde gözle görülür bir değişikliğe neden olacaktır.

React'ta state'i props'tan ayırmak önemlidir çünkü props, component'ler arasında veri paylaşımını sağlar. Ancak, state sadece component içinde tanımlanır ve kullanılır. State, sadece component içindeki değişimlerin yönetimi için kullanılmalıdır. Başka bir deyişle, bir component'in içinde state değerleri kullanılır.

State, bir obje olarak tanımlanır ve component'in constructor içinde tanımlanır. Bu sayede, component içinde state'e erişilebilir. State değiştirildiğinde ise, component'in otomatik olarak yeniden render edilmesi ve bu değişimin kullanıcı arayüzünde gösterilmesi için bir mekanizma vardır.

İlkeler

State yönetimi, React uygulamalarında oldukça önemli bir konudur. State yönetimi yapılırken dikkat edilmesi gereken ilkeler bulunmaktadır. Bu ilkeler, state'in doğru bir şekilde kullanımı ve yönetimine yardımcı olmaktadır.

En önemli ilke "Single source of truth" yani "tek doğru kaynak" ilkesidir. Bu ilke, bir component'in state'i tek bir yerde saklanmalıdır anlamına gelir. Böylece state'e erişim daha kolay hale gelir ve her component state bilgisinin birbirinden farklı yerlerde saklanmasından dolayı oluşabilecek tutarsızlıklar önlenir.

Diğer bir önemli ilke ise "İletişim" ilkesidir. Componentler arası iletişimde, props drilling ve Context API kullanılır. Props drilling, parent component'in child component'ine props vermesi ve bu props'ların birden fazla child component'e aktarılmasıdır. Context API ise, componentler arasında state paylaşımını sağlayan ve prop drilling'e alternatif bir yöntem olarak kullanılan bir API'dır. Bu yöntem, state yönetimini daha organize ve kolay hale getirmektedir.

Son olarak, state yönetiminde Redux ve MobX gibi kütüphaneler de kullanılabilir. Bu kütüphaneler, state yönetimini daha kolay hale getirerek, kodun daha okunaklı ve sürdürülebilir olmasına yardımcı olmaktadır.

Bu ilkeler, state yönetimi konusunda yapılan hataların önüne geçmek ve daha stabil ve sürdürülebilir bir kod yazımı sağlamak için oldukça önemlidir.

Single source of truth

State yönetimi, React uygulamalarında oldukça önemli bir konudur. State, bir component'in içindeki verileri tutan ve component'in kendi durumunu yönetmesini sağlayan bir yapıdır. State yönetiminde en önemli prensiplerden biri, bir component'in state'i tek bir yerde saklanmasıdır. Bu prensibe "Single source of truth" denir.

Bu prensip, React uygulamalarında birden fazla component'in aynı verileri kullanması durumunda hataların ve karşıtlıkların önlenmesini sağlar. Tek bir yerde saklanan veriler, tüm componentler tarafından kullanılır ve değiştirilir. Böylece uygulama, güncel ve doğru verilerle çalışır.

Single source of truth prensibine uygun olarak, bir component'in state'i dışarıdan değiştirilmemelidir. Ancak, state'i değiştirmek gerektiğinde, bu değişiklik yalnızca component'in kendisi tarafından yapılmalıdır. Ayrıca, state'in güncellenmesi gerektiğinde, React'ta setState() fonksiyonu kullanılmalıdır.

Özetle, Single source of truth prensibi, React uygulamalarında hataların ve karşıtlıkların önlenmesini sağlayan bir prensiptir. Bir component'in state'i, tek bir yerde saklanarak, uygulamanın güncel ve doğru verilerle çalışmasını sağlar. Bu prensibe uygun olarak, state güncellemeleri yalnızca component'in kendisi tarafından yapılmalı ve setState() fonksiyonu kullanılmalıdır.

İletişim

Componentler arası iletişim, React uygulamalarında sıkça karşılaşılan bir konudur. Componentler arası iletişim iki şekilde gerçekleştirilebilir: props drilling ve context API. Props drilling, componentler arasında veri iletimini parent-child ilişkisi üzerinden gerçekleştirir. Bu yöntemle bir component'in state'i, parent component tarafından child component'e iletilir ve buradan da alt component'lere iletilir. Ancak, props drilling yöntemi, uygulamanın büyük ve karmaşık hale gelmesine sebep olabilir.

Bunun yerine, Context API kullanımı önerilir. Context API, componentler arasındaki iletişimi kolaylaştıran bir React API'sidir. Bu API sayesinde, componentler arasında state paylaşımı yapmak mümkündür. Context API kullanımı, props drilling yöntemine göre daha kolay ve kullanışlı olabilir. Bu yöntemde, bir state oluşturulur ve bu state, hangi component'te kullanılacaksa, ilgili component'a atanır. Ardından, state değiştiğinde, Context API sayesinde tüm componentlerde bu değişiklikler gerçekleştirilebilir.

Componentler arası iletişimde kullanılan diğer bir yöntem ise event yönlendirme (event forwarding) yöntemidir. Bu yöntem, child component'ten parent component'e veya parent component'ten child component'e eventlerin iletilmesini sağlar. Componentler arasında iletişim kurmak için uygun bir yöntem seçmek, uygulama için daha iyi bir performans sağlayabilir.

Props drilling

Props drilling, React'ta state yönetiminde kullanılan bir tekniktir. Bu teknik sayesinde, parent component'ten child component'e state geçişi sağlanır. Props drilling, uygulamanın büyümesiyle birlikte verimlilik sorunlarına neden olabilir. Bu nedenle, birçok React developer kütüphanelerden birini kullanarak state yönetimini kolaylaştırmayı tercih eder.

Props drilling kullanarak state yönetimi sağlamak için, parent component içinde state tanımlanır ve child component'e geçilir. Child component, parent component'ten gelen state'e ihtiyaç duyarsa, devreye Props drilling teknikleri girer. Bu teknikler arasında, state'in child component'e doğrudan geçirilmesi ya da fonksiyonların props aracılığıyla aktarılması yer alır.

Önemli bir nokta ise, Props drilling'in düzenli bir yapıya sahip olmasıdır. Bu sayede, koddaki değişiklikler kolayca takip edilebilir. Ancak, Props drilling uygulamalarında, component ağacı derinleştikçe, props'ların tüm componentler arasında aktarılması gerekebilir. Bu durumda, uygulama performansı etkilenebilir.

Sonuç olarak, Props drilling React'ta state yönetimi için kullanılan etkili bir tekniktir. Ancak, uygulamanın büyümesiyle birlikte sorunları da beraberinde getirebilir. Bu nedenle, kütüphaneler gibi daha kolay bir çözüm tercih edilebilir.

Context API

Context API, React'ta componentler arası state paylaşımını sağlamak için kullanılan bir yöntemdir. Bu yöntem, props drilling yönteminden daha pratik bir çözüm sunar. Context API, bir üst component'te tanımlanan state'i, alt component'lerin kullanımına açar. Böylece, props drilling yöntemi kullanmaktan kurtulunur.Context API kullanarak, state'i alt component'lerde kullanmak için öncelikle `createContext()` metodu kullanarak bir context oluşturulmak gerekir. Oluşturulan bu context, tüm component'ler tarafından paylaşılabilir hale gelir. ```html

Context API kullanımı için öncelikle bir context oluşturulur. Bu işlem createContext() metoduyla gerçekleştirilir:

const MyContext = React.createContext();

Bu oluşturulan context, provider component'inde kullanılır ve alt component'lere state aktarımı sağlanır:

Burada, Provider component'inin value props'u ile state değeri alt component'lerin kullanımına açılır. Alt component'te ise context'teki state değeri useContext() metoduyla kullanılabilir:

const myState = useContext(MyContext);

Böylece, state yönetimi context API ile çok daha pratik hale gelir.

State Yönetim Kütüphaneleri

React'ta state yönetimi, büyük uygulamalarda gereksiz karmaşıklığı önlemek için kütüphanelerle daha da kolaylaştırılabilir. Bu kütüphaneler, state management konusunda geliştiricilere farklı seçenekler sunar ve uygulamanın boyutunu azaltmaya yardımcı olur.

Redux, yalın bir kütüphane olmasına rağmen, karmaşık uygulamalarda state yönetimini kolaylaştırmaktadır. Redux, temel olarak, tüm state'i tek bir yerde saklamayı sağlayan bir architecture oluşturur ve tek yönlü bir veri akış modeli kullanır. Bu, uygulamadaki değişikliklerin izlenebilirliğini artırır ve hataları hızlı bir şekilde belirlemeye yardımcı olur. Ayrıca, Redux, asenkron işlemler için de uygun bir araçtır.

MobX, Redux'a kıyasla daha basit bir state yönetim sistemidir. Bu kütüphane, herhangi bir React uygulamasına hızlı bir şekilde entegre edilebilir ve gereksiz tekrarları önleyen bir observer pattern kullanır. MobX, state değişikliklerinin nasıl uygulanacağına dair çok fazla kısıtlama koymaz ve bileşenler arasındaki iletişimi kolaylaştırır.

Redux ve MobX, React uygulamalarında kullanılan popüler kütüphanelerdendir. Her biri, büyük ölçekli uygulamalarda state yönetimi için farklı yaklaşımlar sunar. Redux, Elma katmanlı mimarıisi gibi düşünebiliriz; MobX, Patates cipsi üzerine sos gibi bir yaklaşımdır. Hangisini seçerseniz seçin, React uygulamanızda state yönetimi daha iyi hale gelecektir.

Örnek Uygulama

React, state yönetimi konusunda oldukça esnek bir yapıya sahiptir. State, bir component'in içindeki veri durumu olarak tanımlanabilir. React'ta state, herhangi bir event ya da kullanıcı etkileşimi sonucunda değişebilir. Ancak, state yönetimi her component'in kendi local state'ini kontrol etmesi anlamına gelmez. Bu durum, ölçeklenebilirliği zorlaştırabilir ve kod karmaşasına neden olabilir. Bu yüzden, state yönetimi bazı ilkelerle yürütülmelidir.

State yönetiminin en önemli ilkelerinden biri, Single Source of Truth'tur. Bu ilke, bir component'in state'inin sadece tek bir yerde tutulması gerektiğini ifade eder. Bu, componentler arası iletişimi ve birbirleriyle veri paylaşımını kolaylaştırır. İletişim genellikle iki yöntemle gerçekleştirilir: Props drilling ve Context API kullanarak.

Props drilling, bir component'ten diğerine veri aktarmanın manuel bir yoludur. Bu yöntemde, parent component'leri kullanarak veri aktarılır. Bu nedenle, büyük uygulamalarda kullanımı zorlaşabilir. Context API ise componentler arasındaki iletişimi kolaylaştıran bir React özelliğidir. Context API kullanarak, parent component'ten veri geçirme işlemi çok daha kolay ve doğal bir hale gelir.

State yönetiminde kullanılan bir diğer yöntem ise popüler bir state yönetim kütüphanesi olan Redux'tur. Redux, state'in tutulduğu global bir store'a sahip olur. Bu şekilde, state tüm uygulama boyunca ortak bir yerde saklanır ve componentler arası iletişim daha kolay hale gelir.

Bir örnek uygulamada, state yönetimini gerçekleştirmek oldukça önemlidir. Bu, uygulamanın ölçeklenebilirliği ve performansı açısından büyük bir etkiye sahiptir. Bu nedenle, bir örnek uygulamada state kullanımı ya da Redux kullanımı gibi farklı yöntemlerin nasıl uygulanacağı öğrenilebilir. Örnek bir uygulamada state yönetimini gerçekleştirmek için, bir component'in state'i belirli bir event ya da etkileşim sonucunda değiştiğinde, bu değişim state içinde güncellenir ve render edilen component'e yansıtılır.

Özetle, React'ta state yönetimi oldukça önemlidir ve yönetim süreci bazı ilkelerle gerçekleştirilmelidir. Örnek bir uygulamada, state yönetimi nasıl gerçekleştirileceği öğrenilebilir ve farklı yöntemlerin avantajları ve dezavantajları anlaşılabilebilir.

State kullanımı

State, React'ta en önemli konulardan biridir. Bir component'in tuttuğu değişkenlerin durumu, yani state, Vue.js'deki data'sı gibi düşünebiliriz. State'i kullanarak bir component'in görsel görüntüsünü değiştirebiliriz. Örneğin, bir butona tıkladığımızda istenilen değerlerin değiştirilmesi veya bir input alanı kullanıldığında yazıların güncellenmesi gibi durumlar state kullanarak yapılabilir.

Bir örnek uygulama üzerinde state kullanımını anlatalım. Öncelikle, bir navbar component'imiz olduğunu ve içindeki butonların renklerini değiştirmek istediğimizi varsayalım. Bunun için, navbar component'inin içinde bir state oluşturabiliriz.

Örnek bir kod yapısı:

class Navbar extends React.Component {  constructor(props) {    super(props);    this.state = {      buttonColor: 'blue'    };  }
  render() {    return (      
        Button      
    );  }}

Yukarıdaki kodda, navbar component'i içinde bir state oluşturduk ve buttonColor adında bir değişken tuttuk. Bu değişken başlangıçta 'blue' değerini alıyor. Daha sonra, button'un arka plan rengi bu değişkene göre ayarlanıyor.

Butonun rengini değiştirmek için, onClick fonksiyonunu kullanabiliriz. Örnek bir kod yapısı:

class Navbar extends React.Component {  constructor(props) {    super(props);    this.state = {      buttonColor: 'blue'    };  }
  changeButtonColor = () => {    this.setState({ buttonColor: 'red' });  }
  render() {    return (      
        Button      
    );  }}

Yukarıdaki kodda, changeButtonColor adında bir fonksiyon oluşturduk. Bu fonksiyon, buttonColor değişkeninin değerini 'red' yaparak butonun rengini değiştiriyor. Fonksiyonu butonun onClick özelliğinde kullanarak butona tıklandığında rengin değişmesini sağladık.

Yukarıdaki örnek, state'in nasıl kullanılabileceğini gösteriyor. State'in kullanımı, uygulamaların daha dinamik ve interaktif hale gelmesini sağlar. Ancak, state'i doğru kullanmak önemlidir ve aynı değişkenin birden fazla yerde değiştirilmesi gibi durumlardan kaçınmak gerekir. Bunun için, react uygulamalarında state yönetimini sağlamak için Redux, MobX gibi state yönetim kütüphaneleri de kullanılabilir.

Redux kullanımı

Redux, React uygulamalarında kullanılan en popüler state yönetim kütüphanelerinden biridir. Bu kütüphane, uygulamanın state'ini merkezi bir yerde tutar ve componentler arasında state paylaşımını kolaylaştırır.

Örnek bir uygulama üzerinde Redux kullanımını inceleyecek olursak, öncelikle Redux kütüphanesini projemize eklememiz gerekiyor. Bunun için npm ya da yarn kullanarak redux paketini projemize yüklememiz gerekiyor.

npm install redux

ya da

yarn add redux

Redux kullanımının başlangıç noktası, bir tane store oluşturmaktır. Bu store, uygulamanın tüm state'ini içerir ve merkezi bir şekilde yönetilir. Örnek bir store oluşturmak için aşağıdaki gibi bir kod yazabiliriz:

```javascriptimport { createStore } from 'redux';

const initialState = { counter: 0};

const reducer = (state = initialState, action) => { switch (action.type) { case 'INCREMENT': return { ...state, counter: state.counter + 1 }; case 'DECREMENT': return { ...state, counter: state.counter - 1 }; default: return state; }};

const store = createStore(reducer);```

Yukarıdaki kodda, önce bir initialState tanımlıyoruz. Bu, uygulamanın başlangıç state'ini belirler. Daha sonra bir reducer tanımlıyoruz. Bu reducer, action'lara göre state'i güncelleyen bir fonksiyondur. Son olarak da createStore fonksiyonunu kullanarak bir store oluşturuyoruz.

Store'u oluşturduktan sonra, componentlerimizde state'i kullanmak için birkaç adım daha atmamız gerekiyor. Bunun için redux'un sağladığı connect fonksiyonunu kullanabiliriz. Örnek bir componenti Redux ile bağlamak için aşağıdaki gibi bir kod yazabiliriz:

```javascriptimport { connect } from 'react-redux';

const Counter = ({ counter, dispatch }) => { return (

);};

const mapStateToProps = state => { return { counter: state.counter };};

export default connect(mapStateToProps)(Counter);```

Burada önce connect fonksiyonunu import ediyoruz. Daha sonra bir Counter component'i oluşturuyoruz ve mapStateToProps fonksiyonunu kullanarak store'daki state'i component props'una map ediyoruz. Son olarak da connect fonksiyonunu kullanarak component'i store'a bağlıyoruz.

Yukarıdaki örnekler, Redux'un temel kullanım senaryolarını göstermektedir. Daha karmaşık uygulamalarda, Redux'un sunmuş olduğu state yönetimi avantajlarını daha rahat kullanabiliyoruz.