useState ve useContext'un Tanımı

useState ve useContext, React uygulamaları yazarken kullanılan iki önemli fonksiyondur useState, component içindeki bir değişkenin state'ini takip etmek için kullanılır useContext ise, global state yönetimini sağlar createContext fonksiyonu ile bir context oluşturulur ve bu context üzerinden değer atamaları yapılır useContext ile child component'lerde parent component'teki veriler kullanılabilir Bu sayede, gereksiz kod yazımı önlenir ve uygulama daha anlaşılır hale gelir

useState ve useContext hooks bir React uygulaması yazarken kullanabileceğimiz iki temel fonksiyondur. useState, bir React function component'ında state yönetmek için kullanılırken, useContext, React context'i kullanarak global state yönetmeyi mümkün kılar.

useState aynı zamanda component'in içindeki belirli bir değişkenin state'ini takip etmek için kullanılır. Bu, component'in durumu değiştiğinde bileşenin tekrar render edilmesini getirir. Kısacası, useState, component'in içindeki bir değişkeni takip etmek için kullanılabilir.

useContext kullanıldığında ise, component ağacında belirtilen bir context'i kullanarak verilerinizi paylaşabilirsiniz. Böylece, bir component'teki değişiklikleri diğer component'lerdeki datalara yansıtmak mümkün hale gelir. Örneğin, bir kullanıcının ismini ve yaşını diğer component'te kullanmak isterseniz useContext kullanabilirsiniz.

useState Kullanımı

useState, React kütüphanesindeki en temel hook'lardan biridir. Bu hook, state tutmamızı ve state'i güncellememizi sağlar. useState'ın kullanımı oldukça basittir. İlk olarak, useState hook'unu import etmemiz gerekiyor:

import React, { useState } from 'react';

useState kullanarak bir component içinde state tanımlamanın örneği aşağıdaki gibi olabilir:

import React, { useState } from 'react';function Counter() {{  const [count, setCount] = useState(0);  return (          The count is {count}
          
  );}}

Bu örnek, bir sayacın değerini tutmak için state kullanır. useState hook'u, count adlı bir state değişkeni ve setCount adlı bir fonksiyon döndürür. setCount fonksiyonu, count state'ini güncellemek için kullanılır.

Bu örnekte, useState hook'unun içine başlangıç değeri olarak 0 atanmıştır. Ancak, başlangıç değeri isteğe bağlıdır ve eğer atanmazsa, state'in başlangıç değeri undefined olur.

useState kullanırken, birden fazla state değişkeni tanımlayabilirsiniz. Örneğin:

import React, { useState } from 'react';function Form() {{  const [name, setName] = useState('');  const [email, setEmail] = useState('');  const [password, setPassword] = useState('');    const handleSubmit = (e) => {{    e.preventDefault();    console.log(name, email, password);  }};    return (           setName(e.target.value)} />       setEmail(e.target.value)} />       setPassword(e.target.value)} />          
  );}}

Bu örnek, bir formun ad, e-posta ve parola alanlarının değerlerini state olarak tutar. Her alan için bir useState hook'u kullanılmıştır.

useState kullanımı oldukça basittir ve React component'lerinde state tutmanın temel yoludur.

useContext Kullanımı

useContext, React Hooks ile beraber kullanılan bir fonksiyondur. Bu fonksiyon, parent component'teki state'i veya fonksiyonu, child component'leri tek tek geçirerek yeniden kullanma ihtiyacını ortadan kaldırır ve gereksiz kod yazımını azaltır.

useContext ile bir context değeri oluşturmak ve değer atamak oldukça kolaydır. createContext() fonksiyonu kullanarak bir context oluşturulur ve bu context'e bir değer ataması yapılır. Bu değer, component tree'nin içinde tüm child component'lere otomatik olarak aktarılır.

useContext'in kullanımı şu şekildedir:

            // Parent component            export const MyContext = React.createContext();            function ParentComponent(props) {              const [state, setState] = useState(initialState);              return (                                  {props.children}                              );            }

            // Child component            function ChildComponent() {              const { state, setState } = useContext(MyContext);              return (                                  {state}
                                  
              );            }

'createContext()' fonksiyonu ile bir context oluşturulur ve 'MyContext' olarak tanımlanır.
'ParentComponent' içinde '' kullanılarak, 'state' ve 'setState' değerleri context'e atanır ve child component'lere otomatik olarak aktarılır.
'ChildComponent' içinde 'useContext' hook'u kullanarak, 'state' ve 'setState' değerleri context'ten çekilir ve kullanılır.

Yukarıdaki örnekte, ParentComponent içinde oluşturulan 'MyContext' component'inin içindeki 'state' ve 'setState' değerleri, ChildComponent'teki useContext() fonksiyonu ile alınarak kullanılır. Bu sayede, ParentComponent'teki değerleri her child component'e değil, tek bir yerden (Context) çekerek işlemler yapılır. Bu da kodların daha anlaşılır ve kullanışlı olmasını sağlar.

Context Oluşturma

React'ta bir context oluşturmak, tüm uygulama veya özellikleriniz için genel bir uygun bir veri geçişi sağlar. useContext ile iş yaparken global değişken kullanmak yerine, her bileşen için yeni bir props göndermeniz mümkün olur.

Bunun için createContext kullanılır. Bu metot oluşturulan context'i döndürmek için kullanılır. createContext metodu, bir başlangıç değeri alabilir. Bu, context'i tüketen yerlerde kullanılacak olan değerdir.

```htmlimport { createContext } from 'React';

const ExampleContext = createContext(defaultValue);```

Context'in sağlamış olduğu herkes için geçerli olan data, defaultValue parametresinde tanımlanır. createContext her komponentin içinde kullanılabilecek olan iki öğeler olan Provider ve Consumer öğeleri döndürür.

Diğer taraftan, Provider, context'i açığa çıkarır. Tüketiciler (Consumer) tükettikleri zaman sağlanan değeri kullanabilirler.

```html ```

Context oluşturma işlemi bittikten sonra, bu değeri kullanmak için Consumer kullanılır. Consumer, bir context içindeki tüm verileri okur. Temel olarak, bir Consumer'i context içindeki tüm bileşenlerle desteklenen bir doğrudan arayüz olarak düşünebilirsiniz.

```html {context =>

{context.data}

}```

Yeni bir Context oluşturmak için örnek bir kod aşağıdaki gibidir:

```htmlconst ThemeContext = createContext('light');

class ThemeToggler extends React.Component { static contextType = ThemeContext; render() { return ( ); }}

function Content() { return (

);}

function App() { return ( );}

ReactDOM.render( , document.getElementById('root'));```

Yukarıdaki örnek, bir Context kullanarak bileşenler arasında bir tema değiştirme özelliği göstermektedir. Bir bileşeni, context'ün sağladığı theme verisini toggle eder. bileşeninde bileşeni kullanılır.

Bir context'i kullanmak istediğiniz yerde, Provider'ı kullanmak gerekir. Çok katmanlı context'lerde bunu yapabilmek için her katmanda bir Provider eklemek gerekir. Bu durumda Provider’ın erişimini export eden bir HOC işlevi oluşturulabilir.

Context'i Kullanımı

Context oluşturulduktan sonra, oluşturulan context üzerinde işlem yapmak oldukça kolay. Context'in sağladığı değerler, context'i kullanan herhangi bir bileşen tarafından erişilebilir. getContext metodu kullanılarak, context'in değerlerine erişmek mümkündür.Aşağıdaki örneklerde, context'in kullanımı açıklanacaktır. Öncelikle, bir context oluşturulması gerekmektedir. Bir kullanıcı temasını tutan bir context örneği olarak aşağıdaki kodu ele alalım:```javascriptimport React, { createContext } from 'react';export const UserContext = createContext(null);const UserProvider = ({ children }) => { const user = { username: 'exampleUser', email: 'user@example.com', }; return ( {children} );};export default UserProvider;```Context'in değerleri burada kullanıcı adı ve e-posta adresi olarak ayarlanmıştır. Oluşturulan context, diğer bileşenler tarafından kullanılabilir hale getirilir.```javascriptimport React, { useContext } from 'react';import { UserContext } from './UserContext';const User = () => { const user = useContext(UserContext); return (

Username: {user.username}

Email: {user.email}

);};export default User;```User bileşeni, UserContext'i kullanarak kullanıcının adını ve e-posta adresini göstermektedir. useContext, UserContext içinde tanımlı olan değerlere erişmemizi sağlar.Bu örnekte, sadece bir adet context kullanılmıştır. Yeni bir context oluşturularak, bileşenler arasında değerlerin daha kolay şekilde aktarımı sağlanabilir.```javascriptimport React, { createContext } from 'react';export const ThemeContext = createContext('light');const ThemeProvider = ({ children }) => { return ( {children} );};export default ThemeProvider;```Bu örnekte, ThemeContext oluşturulmuştur ve varsayılan değer 'light' olarak tanımlanmıştır. Ayrıca, yeni bir bileşen olan ThemeProvider da oluşturulmuştur. Bu bileşen, ThemeContext'in sağladığı değere 'dark' olarak ayarlanmıştır. Bu da, ThemeContext'i kullanan diğer bileşenlerin değer okumalarını etkiler.```javascriptimport React, { useContext } from 'react';import { ThemeContext } from './ThemeContext';const Theme = () => { const theme = useContext(ThemeContext); return (

Theme: {theme}

);};export default Theme;```Bu örnekte, Theme bileşeni, oluşturulan ThemeContext'i kullanan yeni bir bileşendir. useContext hook'u, ThemeContext içindeki değerlere erişir. Daha sonra, bileşenin render işleminde, tema 'dark' olarak gösterilir.

Multiple Context Kullanımı

Birden fazla context kullanımı, bir uygulamanın farklı bileşenleri arasında veri aktarımının daha organize bir şekilde yönetilmesine olanak sağlar. Örneğin, bir e-ticaret uygulamasında sepetteki ürünlerin ve kullanıcının profil bilgilerinin ayrı ayrı context'lerde tutulması daha uygun olacaktır. Ayrıca, birden fazla context kullanarak büyük boyutlu ve karmaşık uygulamalarda da yönetilebilirliğin artırılması mümkündür.

Birden fazla context kullanımı, useContext hook'una ek olarak createContext hook'u kullanılarak gerçekleştirilir. createContext hook'u ile birlikte oluşturulan her tek bir context, ayrı bir obje olarak tanımlanır ve ilgili bileşenlerin kullanımına sunulur.

Örneğin, bir proje yönetim uygulamasında, "Projeler" ve "Görevler" adında iki ayrı context oluşturulabilir. Her biri, ilgili bileşenlerde veri erişimini daha uygun hale getirir. Projeler bileşeninde kullanıcının oluşturduğu projelerin listesi ve seçili proje ayrı ayrı tutulurken, Görevler bileşeninde seçili projenin görev listesi ve kullanıcının seçtiği filtreleme ayarları ayrı context'lerde tutulabilir.

Bu şekilde, context'ler arasında tutulan verilerin karışıklığı önlenir ve her bir context'in yönetimini daha kolay hale getirir.

Multi-context kullanımı örnekleri için ayrıca tablolar ve listeler oluşturulabilir. Örneğin, bir web uygulamasında bir kullanıcının profil bilgilerinin yanı sıra, favori filmlerinin ve takip ettiği kitapların yer aldığı bir sayfada, her biri ayrı bir context olarak tutulacak ve kullanıcının profiline erişen bileşenlerde erişilebilecektir. Bu sayede, farklı bilgilerin ayrı context'lerde tutularak daha etkili bir şekilde yönetilebileceği gösterilir.

Context ile İletişim Kurmak

useContext ile oluşturulan değerlerin useState ile birlikte kullanılması gerektiği durumlar olabilir. Bu gibi durumlarda useContext ve useState arasındaki iletişimi kurmak oldukça önemlidir.

useState ile context'teki değerlere erişmek için useContext kullanmamız gerekiyor. Aynı zamanda useState ile kullanılacak olan context'in oluşturulması da gerekiyor. Bunun için createContext() metodunu kullanıyoruz. createContext() metodunun içine, varsayılan değeri belirlemek için bir parametre geçebiliriz. Bu parametre, context'in değeri henüz atanmadığında kullanılacak olan varsayılan bir değerdir.

Örneğin, bir tema özelliği olan bir uygulamada useState ile context kullanmak isteyebiliriz. createContext() metoduyla tema context'ini oluşturup, useState metodu ile bu context'in o anki değerine erişebiliriz. Bu şekilde, tema seçeneklerinin güncellenmesi için useState kullanırken, tema seçeneğinin değerinde değişiklik yapmak için useContext kullanabiliriz.

Ayrıca, useContext'in esnekliği de bize useState ile birlikte context kullanmada yardımcı olur. Örneğin, useState ve useContext arasında bir çelişki varsa, useContext'ten aldığımız değeri herhangi bir şekilde değiştirebiliriz. Örneğin useContext'ten alınan değeri, useState ile güncelleyebiliriz. Bu sayede, useState ve useContext arasında bir köprü oluşturarak, her ikisi arasında sorunsuz bir şekilde geçiş yapabiliriz.

Tablo 1'de, useState ile context arasındaki iletişimin örnekleri ve çözümleri verilmiştir.

useState Örneği	useContext Örneği	Çözüm
Kullanıcı adını useState ile kaydetmek	Temayı useContext ile seçmek	useState ile kaydedilen kullanıcı adını, useContext ile tema context'inde kullanmak
Bir butona tıkladığımızda useState ile bir değeri değiştirmek	useContext ile dil ayarını değiştirmek	Tıklanan butona göre useState ile bir değeri değiştirdikten sonra useContext ile dil ayarını güncellemek
Sabitleştirilmiş bir değeri useState ile kullanmak	Kullanıcı ayarlarını useContext ile almak	useState ile sabitleştirilmiş bir değeri, useContext ile kullanıcı ayarlarına eklemek

Sonuç olarak, useState ve useContext arasındaki iletişimin kurulması oldukça önemlidir. useState ile context'teki değerlere erişip, useContext ile bu değerleri kullanarak, kullanıcı deneyimini geliştirebiliriz. Bunun yanı sıra, useState ve useContext'in birlikte kullanımında esnekliğin önemi de oldukça büyüktür.

useState vs useContext: Farklılıklar Nelerdir?

useState ve useContext, React'ta iki önemli kavramdır ve birçok benzerlikleri vardır. Ancak, her biri farklı amaçlar ve kullanım senaryoları için tasarlanmıştır.

useState, component içindeki state değerlerini tutmak için kullanılır ve değiştirebilir. Yani, bu yöntem, component'in state'i gözlemlemesine ve gerektiğinde değiştirmesine izin verir. State, aynı component'in farklı fonksiyonları arasında da kullanılabilir. Bu nedenle, component'in içindeki bir fonksiyon, diğer bir fonksiyondan gelen state değişikliklerini görebilir ve buna yanıt verebilir.

useContext ise, component hiyerarşisi boyunca veri paylaşmayı sağlayan bir yöntemdir. Bu, yüksek seviyeli component'ten alt seviyeli componentlere veri iletmenin daha kolay ve hatasız olmasını sağlar. Bu nedenle createContext() fonksiyonu kullanılır; bu fonksiyon, bir context objesi döndürür ve bu objeto, component'ler arasında paylaşılabilir. Bu yöntem, birden fazla component'te kullanılabilen bir değeri paylaşmanız gerektiğinde kullanışlıdır.

useState ve useContext'un en büyük farkı, useState'ın yalnızca o component'i etkileyebilmesi, Context'in ise tüm component hiyerarşisini etkileyebilmesidir. Bununla birlikte, performans açısından useState daha avantajlıdır, çünkü Context genellikle state değişiklikleri olduğunda yeniden render edilmeye zorlanırken, useState sadece o component'i yeniden render eder.

Sonuç olarak, useState ve useContext birbirine benzer kavramlardır, ancak farklı amaçlar için tasarlanmışlardır. Kullanım senaryolarına göre, her biri iyi bir seçenek olabilir ancak performans veya karmaşıklık düşünüldüğünde, bir diğerine göre daha iyi olabilir. Bu nedenle, proje ihtiyacına göre, kullanımları özenle seçilmelidir.

Performans Farkı

useState ve useContext, React'ta state yönetimi yapmak için kullanılan iki farklı yöntemdir. İkisi arasındaki en önemli farklılıklardan biri performans farkıdır.

useState, bir bileşen içinde yerel bir state oluşturur. Bu state, bileşenin her render edildiğinde yeniden oluşturulur. Dolayısıyla, useState kullanırken bileşenlerin birden fazla state'i olduğunda performans sorunları ortaya çıkabilir. Her bir state değiştiğinde bileşenin yeniden render edilmesi gerektiği için, bileşenlerin performansı azalabilir.

Diğer yandan, useContext, bileşenler arasında ortak bir state yönetimi oluşturur. Bir bileşen tarafından değiştirildiğinde, tüm bileşenler bu değişiklikten haberdar olur ve sadece ilgili bileşenler yeniden render edilir. Bu, böylece setState'den daha yüksek performans elde edilebilir.

Bu nedenle, birden fazla bileşenin paylaştığı bir state oluşturmak istediğinizde useContext kullanmak daha performanslı bir yol olabilir. Ancak, küçük ve basit bileşenler için useState kullanmak daha mantıklı olabilir.

Sonuç olarak, kullanılacak yöntem bileşenlerin boyutuna, yapısına ve performans ihtiyacına göre değişiklik gösterebilir.

Koddalık Farkı

useState ve useContext'un kullanımı, React uygulamaları geliştirirken vazgeçilmezdir. Ancak bu iki hook arasında ciddi farklar bulunmaktadır. Bunlardan biri de kullanımlarındaki koddalık farkıdır.

useState kullanıldığında, ilgili statenin değeri component içinde manipüle edilebilir. Yani state'in manipüle edilmesi, component içinde kalmaktadır. Ancak bu durum, component'ler arasında veri aktarımında kullanılamaz.

useContext'te ise durum farklıdır. DataContext adında bir context oluşturulup, içine istenilen değerler atanır. Bu değerler, tüm component'ler tarafından paylaşılır ve bir component içerisinde değer değiştirildiğinde, diğer component'lerde değişiklik yapar. Böylece, veri aktarımı daha kolay ve hızlı hale gelir.

Ancak useContext kullanımında, createContext fonksiyonu ile bir context oluşturmak gerekmektedir. Bu, useState'e göre biraz daha zaman alır ve daha fazla kod yazmayı gerektirir. Bu sebeple, küçük uygulamalarda useState daha pratik ve kullanışlı olabilirken, büyük uygulamalarda useContext tercih edilmelidir.

Ayrıca, useContext kullanımı daha metotlar ve Class Component'lar gibi daha kompleks yapılarla kullanışlı hale gelirken, useState daha fonksiyonel component'lar ile rahatlıkla kullanılabilir.

Kısacası, useState ve useContext arasında koddalık farkı bulunmaktadır. Küçük uygulamalar için useState daha pratik olabilirken, büyük uygulamalarda useContext kullanmak daha avantajlıdır.