React uygulamalarında state yönetiminde kullanılan Context API, componentler arasında global bir state oluşturmayı mümkün kılar ve provider ve consumer yapılarıyla tüm componentlerde kullanımını sağlar Provider componenti içinde tanımlanan state ve fonksiyonlar, value prop'u aracılığıyla consumer componentlere aktarılır ve useContext hook'u kullanılarak çağrılabilir hale gelir Context API, global state yönetimi gerektiren projelerde oldukça faydalıdır ve kullanımı zor olsa da öğrenildiğinde state yönetimini kolaylaştırır

React uygulamaları geliştirirken, verinin aktarıldığı component aralarında yönetimini sağlamak oldukça önemlidir. Bu noktada React Context API, state yönetiminde kullanılacak en etkili araçlardan biridir. Context API sayesinde component hiyerarşisi içinde bulunan componentler arasında state bilgilerini paylaşabilir ve kolayca aktarabilirsiniz.

Context API, diğer state yönetimi yöntemlerine göre daha zorlu bir kullanımı olsa da, büyük ölçekli uygulamalarda avantajlar sunmaktadır. Context API’nin kullanımı özellikle global state yönetimi gerektiren projelerde oldukça kolaylaştırıcıdır.

Context API Nedir?

Context API, React uygulamalarında state yönetimi için kullanılan bir araçtır. Bu API, React uygulamalarının genelinde global bir state oluşturmak ve bu state'i provider ve consumer yapıları yardımıyla tüm componentlarda kullanmak mümkün hale getirir. Provider, context değerlerini tüm alt componentlara geçiren bir componenttir. Consumer ise, context değerlerine erişmek için kullanılan bir componenttir.

Context API Nasıl Kullanılır?

Context API kullanarak state yönetimi yapmak için öncelikle bir provider componenti oluşturulmalıdır. Bu provider, altında yer alan tüm componentlerde state'i tutacak ve bu state'i değiştirecek fonksiyonları sağlayacaktır.

Provider componenti içinde useState hook'u kullanılarak state ve state'i değiştirecek olan fonksiyon tanımlanır. Bu state ve fonksiyon, provider'ın altındaki tüm componentler tarafından kullanılabilir hale gelir.

Provider componenti içinde tanımlanan state ve fonksiyon, value prop'u aracılığıyla consumer componentlerine aktarılır. Consumer componentlerinde useContext hook'u kullanılarak, provider tarafından sağlanan state ve fonksiyon çağrılabilir.

Örneğin, MyProvider isimli bir provider componenti tanımlanmış ve bu componentin altında yer alan MyComponent isimli bir consumer componenti olsun. MyProvider içinde tanımlanan state ve fonksiyon, value prop'u aracılığıyla MyComponent'e aktarılır. MyComponent içinde useContext(MyContext) hook'u kullanılarak, provider componentinde tanımlanan state ve fonksiyon çağrılabilir hale gelir.

Bir provider componenti oluşturmak için createContext() methodu kullanılır. createContext() methoduyla bir context oluşturulur ve bu context, provider ve consumer componentlerinde kullanılır.

Provider componenti içinde tanımlanan state ve fonksiyon değiştirildiğinde, Context API tüm consumer componentleri otomatik olarak günceller. Bu sayede, state yönetimi kolay hale gelir.

Context API, React uygulamalarında state yönetimi için kullanılabilecek en etkili araçlardan biridir ancak kullanımı zor olabilir. Ancak, bir kez öğrenildiğinde, state yönetiminde oldukça rahat bir kullanım sağlar.

Provider Kullanımı

React'ta state yönetiminde kullanılan Context API, React uygulamasındaki tüm componentların state ve fonksiyonlarını kullanımını sağlayan bir araçtır. Provider, Context API'nin bir parçasıdır ve state değerlerini tutar.

Provider kullanımı, state ve fonksiyonların provider içerisinde tanımlanmasıyla gerçekleştirilir. Bu sayede, provider'ın altındaki tüm componentlarda bu state değerleri ve fonksiyonları kullanabiliriz.

Aşağıda React uygulamasında kullanılan basit bir Provider örneği verilmiştir:

                                    import React, { createContext, useContext, useState } from 'react';                    const MyContext = createContext();                    function MyProvider(props) {                      const [state, setState] = useState({ name: 'John' });                      const changeName = n => {                        setState({ ...state, name: n });                      };                      return <MyContext.Provider value={ { state, changeName }}>{props.children}</MyContext.Provider>;                    }                    export { MyContext, MyProvider };                            

Bu örnekte MyProvider componenti içerisinde state değeri "John" olarak tanımlanmış ve changeName fonksiyonu da state değerini değiştirmek için kullanılmıştır. Bu fonksiyon daha sonra MyComponent componentinde kullanılacaktır.

Provider içerisinde tanımlanan tüm state değerleri ve fonksiyonları, provider'ın altındaki tüm componentlarda kullanılabilir hale gelir.

Provider Örnek Kodu

Provider Örnek Kodu

Context API'nin kullanımı için provider ve consumer kullanılır. Provider içerisinde state ve fonksiyonları tanımlayarak, provider'ın altındaki tüm componentlarda kullanabiliriz. Aşağıdaki örnek kod, MyContext adında bir context oluşturur ve MyProvider içerisinde state tanımlanır. changeName fonksiyonu, state içerisindeki isim değerini değiştirmek için kullanılır.

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function MyProvider(props) {  const [state, setState] = useState({ name: 'John' });  const changeName = n => {    setState({ ...state, name: n });  };  return <MyContext.Provider value={{ state, changeName }}>{props.children}</MyContext.Provider>;}export { MyContext, MyProvider };

Aşağıdaki örnek kod ise MyContext'i useContext hook'u kullanarak tüketir. MyComponent içerisinde MyContext'ten state ve changeName değerleri alınır ve state'in isim değeri h1 elementinin içinde gösterilir. Change Name butonuna tıklandığında ise changeName fonksiyonu çalışır ve isim değeri Jane olarak değişir.

import React, { useContext } from 'react';import { MyContext } from './MyProvider';function MyComponent(props) {  const { state, changeName } = useContext(MyContext);  return (    <div>      <h1>{state.name}</h1>      <button onClick={() => changeName('Jane')}>Change Name</button>    </div>  );}export default MyComponent;

React uygulamalarında state yönetimi için en popüler araçlardan biri olan Context API, component ağacında bulunan componentler arasında veri iletişimi sağlar. Context API kullanarak, tüm componentlerdeki state'leri kalıcı hale getirebilir ve bu state'lere provider ve consumer kullanarak erişebiliriz.

Bir Context objesi oluşturmak için createContext() fonksiyonu kullanılır ve bu obje, tüm child componentlerde kullanılabilir. Bu nedenle Context API kullanarak state yönetimi yapmak, componentler arasında veri paylaşımını kolaylaştırır.

Yukarıda yer alan createContext() fonksiyonu kullanılarak, MyContext adında bir Context objesi oluşturulmuştur. Bu Context objesi, MyProvider componenti tarafından sağlanacak state ve fonksiyonları tüm child componentlere aktarır. MyProvider componenti ise, provider ve consumer kullanarak state yönetimini sağlar.

function MyProvider(props) fonksiyonu, React uygulamalarında state yönetimi için kullanılan Context API'in provider özelliği içinde kullanılan bir fonksiyondur. Bu fonksiyon sayesinde, altındaki componentlara state ve fonksiyonlar aktarılarak, herhangi bir componentta state ve fonksiyonlara erişilmesi sağlanır. Provider içerisinde tanımlanan state, value objesi içinde bulunur.

Örneğin, bir context oluşturmak ve bu context içerisinde state ve fonksiyonlar tanımlamak istediğimizde, aşağıdaki gibi bir kod yazabiliriz:

const MyContext = createContext();const [state, setState] = useState({ name: 'John' });const changeName = n => {  setState({ ...state, name: n });};<MyContext.Provider value={{ state, changeName }}>  [...]</MyContext.Provider>;

Bu şekilde, oluşturduğumuz state ve fonksiyonlar, <MyContext.Provider> ile sarılan componentlarda kullanılabilir hale gelir.

Bir React Context API örneğinde, const [state, setState] = useState({ name: 'John' }); kullanılarak state yönetimi gerçekleştirilebilir. Burada, useState() fonksiyonu kullanılır ve state değeri { name: 'John' } olarak tanımlanır. setState() fonksiyonu ise bu state değerini günceller.

Bu örnek kodda MyContext olarak tanımlanan bir context oluşturulmuştur ve MyProvider adlı bir bileşen içinde state ve changeName fonksiyonu tanımlanmıştır. Bu nesneleri MyContext içinde bir değer objesi olarak göndererek sağlanan contexti kullanırız. Tüm alt bileşenlerde bu contextten faydalanılabilir.

Bir react uygulamasında, state'i güncellemek için kullanacağımız fonksiyon olan "changeName", Context API aracılığıyla kullanılır. Bu fonksiyonun içerisine, güncellenecek yeni değer "n" olarak parametre olarak verilir. Fonksiyon içerisinde ise "setState" metodu kullanılarak, name alanındaki değer güncellenir. Böylece, provider içerisindeki state de güncellenir ve consumer'lar aracılığıyla yeni değer görüntülenir.

Aşağıdaki örnek kod, "changeName" fonksiyonunun nasıl kullanıldığını göstermektedir:

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function MyProvider(props) {  const [state, setState] = useState({ name: 'John' });  const changeName = n => {    setState({ ...state, name: n });  };  return <MyContext.Provider value={{ state, changeName }}>{props.children}</MyContext.Provider>;}export { MyContext, MyProvider };

Bu örnekte, "changeName" fonksiyonu "MyProvider" component'ı içerisinde tanımlanmıştır. Fonksiyon içerisinde, "setState" metodu kullanılarak, name alanındaki değer "n" olarak verilen yeni değerle birlikte güncellenir.

setState({ ...state, name: n }); kodu, Context API içerisinde state'in güncellenmesi için kullanılır. Bu kod, state içerisindeki 'name' alanını 'n' değeri ile günceller ve diğer state değerlerini de aynı şekilde muhafaza eder.

Bu yöntem, state içerisindeki diğer özelliklerin korunması açısından önemlidir. Aynı zamanda bir önceki state özelliği değiştirilerek aynı zamanda yeni bir state oluşturulur. Bunun sonucu olarak, React'ın "render()" fonksiyonu yeni bir state oluşturulduğunda tetiklenir ve güncellemeleri gösterir.

Bu örnekte MyProvider component komponentinde bir useState hook'u kullanılarak bir state tanımlanmıştır. changeName fonksiyonu, setState hook'unu kullanarak name özelliğini güncelleyecektir. Provider, value prop'u aracılığıyla, provider'ın altındaki tüm componentlara state'i ve changeName fonksiyonunu sağlar. Ancak Provider, yalnızca altındaki componentlarda değil, kendi içinde de kullanılabilir. Örneğin, iç içe state yönetimi gerektiren durumlarda.

Consumer, useContext hook'u aracılığıyla, MyContext'i belirten bir context'i şimdikilere kopyalar. Context'teki state ve fonksiyonlar, değişkenlere atanarak component'ta kullanılabilir hale getirilir. Bu örnek, component içerisinde state ve fonksiyon kullanımının ne kadar kolay olduğunu gösterir.

Context API, alt componentlardaki state'i güncelleme konusunda harikadır. Bu, prop drilling işlemini engeller. Ancak, uzun vadeli sağlamlığın sağlanması için, global state 'in herhangi bir component tarafından güncellenmesinin engellenmesi önemlidir. Bunu sağlamak için Redux veya MobX gibi başka bir araçla bir arada kullanılabilir.

Sonuç olarak, Context API, state yönetimi için oldukça etkili bir araçtır. Ancak kullanımının zor olması nedeniyle, diğer araçlarla birlikte kullanılması önerilir.

import React, { createContext, useContext, useState } from 'react';const MyContext = createContext();function MyProvider(props) {  const [state, setState] = useState({ name: 'John' });  const changeName = n => {    setState({ ...state, name: n });  };  return {props.children};}export { MyContext, MyProvider };

import React, { useContext } from 'react';import { MyContext } from './MyProvider';function MyComponent(props) {  const { state, changeName } = useContext(MyContext);  return (    
             changeName('Jane')}>Change Name    
  );}export default MyComponent;

import React, { useContext } from 'react';import { MyContext } from './MyProvider';function MyComponent(props) {  const { state, changeName } = useContext(MyContext);  return (    
             changeName('Jane')}>Change Name    
  );}export default MyComponent;

function MyComponent(props) {  const { state, changeName } = useContext(MyContext);  return (    
             changeName('Jane')}>Change Name    
  );}

return (   <ul>    <li>Veri 1</li>    <li>Veri 2</li>    <li>Veri 3</li>  </ul>);