Merhabalar.
Bu yazımda state kontorlü için kullanılan araçlara bakacağız.
React’ta state yönetimi için kullanılabilecek birkaç araç ve yöntem bulunmaktadır.
React’in fonksiyonel bileşenlerinde kullanılan useState
hook’u, bileşen içindeki state’i tanımlamak ve güncellemek için kullanılır.
import React, { useState } from 'react';
const ExampleComponent = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
Karmaşık state yönetimi durumlarında, useReducer
hook’u kullanılabilir. Bu hook, Redux benzeri bir state yönetim yaklaşımını sağlar.
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
};
const ExampleComponent = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
</div>
);
};
Context API, global state yönetimi için kullanılır. Bileşenler arasında state paylaşımını kolaylaştırır.
import React, { createContext, useContext, useState } from 'react';
const MyContext = createContext();
const MyProvider = ({ children }) => {
const [value, setValue] = useState(0);
return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
};
const ExampleComponent = () => {
const { value, setValue } = useContext(MyContext);
return (
<div>
<p>Value: {value}</p>
<button onClick={() => setValue(value + 1)}>Increment</button>
</div>
);
};
Redux, geniş ölçekli uygulamalarda state yönetimini kolaylaştırmak için kullanılan bir kütüphanedir. Redux, tek bir global store kullanır ve state değişikliklerini bir dizi belirli eylem (action) üzerinden yönetir.
// Örnek bir Redux kullanımı
// (Redux için ayrıntılı bir yapıyı anlatmak için daha fazla kod gerekir)
import { createStore } from 'redux';
const initialState = { count: 0 };
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
default:
return state;
}
};
const store = createStore(reducer);
// React ile entegrasyon
import React from 'react';
import { Provider, connect } from 'react-redux';
const CounterComponent = ({ count, dispatch }) => (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
</div>
);
const ConnectedCounter = connect((state) => ({ count: state.count }))(CounterComponent);
const App = () => (
<Provider store={store}>
<ConnectedCounter />
</Provider>
);
MobX, React uygulamalarında kullanılabilecek başka bir state yönetimi kütüphanesidir. MobX, Observable State Tree (OST) kullanarak state yönetimini sağlar ve otomatik olarak bileşenleri günceller.
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';
class CounterStore {
@observable count = 0;
@action increment = () => {
this.count++;
};
}
const counterStore = new CounterStore();
const CounterComponent = observer(() => (
<div>
<p>Count: {counterStore.count}</p>
<button onClick={counterStore.increment}>Increment</button>
</div>
));
Facebook tarafından geliştirilen Recoil, React uygulamalarındaki state yönetimini kolaylaştırmak için tasarlanmış bir kütüphanedir. Recoil, atomlar ve selektörler gibi kavramlarla çalışır.
import { atom, useRecoilState } from 'recoil';
const counterState = atom({
key: 'counterState',
default: 0,
});
const CounterComponent = () => {
const [count, setCount] = useRecoilState(counterState);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
7. Zustand
Zustand, minimalist bir state yönetimi kütüphanesidir. Küçük boyutu ve basit API’si ile dikkat çeker.
import create from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
}));
const CounterComponent = () => {
const { count, increment } = useStore();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
Bu araçlar, React uygulamalarında state yönetimini daha etkili ve ölçeklenebilir hale getirmek için kullanılabilir. Seçim yaparken projenizin ihtiyaçlarına ve büyüklüğüne göre hangi kütüphanenin daha uygun olduğunu değerlendirebilirsiniz.
Bir sonraki yazımda görüşmek üzere.
Selamlar, bu yazımda Oly'nin 1 hafta boyunca olduğu GS iğnesi, yaşanan değişimleri anlatmaya çalışacağım. PCR…
Selamlar, bu yazımda Hemogram ve Biyokimya sonuçlarımızı göstermek için İÜCHH'ne tekrar gidişimizi ve sonrasını anlatacağım.…
Selamlar, bu yazımda GS iğnesine başlama kararımızı ve Oly’de bu süreçte nelere dikkat ediyor, neler…
Selamlar, bu yazımda İÜCHH'deki tedavi sürecimiz ve sonrasında yaşananlardan bahsetmeye çalışacağım. 20.06.2025 Cuma günü saat…
Eve Dönüş ve İlk Şüpheler 18 Haziran Perşembe saat 23 sularında İstanbul’daki evimize giriş yaptık.…
9 Haziran Pazartesi günü Aydın’daki sürecimiz bitti ve Antalya yolculuğumuz başladı. Saat 11 gibi yola…