React Hooks ve Modern State Management

React Hooks, React 16.8 ile 2019 yılında tanıtıldı ve React ekosisteminde devrim niteliğinde bir değişiklik yarattı. Hooks, functional component'lerde state ve lifecycle özelliklerini kullanmayı mümkün kılarak, class component'lere olan ihtiyacı büyük ölçüde azalttı. Bu değişiklik, React uygulama geliştirmeyi daha basit, okunabilir ve maintainable hale getirdi. Hooks, kod organizasyonunu iyileştirir ve logic paylaşımını kolaylaştırır.

Modern React uygulamalarında, state management kritik öneme sahiptir. useState, useEffect ve useContext gibi built-in hooks, temel state management ihtiyaçlarını karşılar. Ancak, karmaşık uygulamalarda, global state management için Redux, Zustand, Jotai ve Recoil gibi kütüphaneler kullanılır. Her kütüphane, farklı yaklaşımlar ve avantajlar sunar.

React Hooks'un Temel Yapısı ve Kullanımı

useState, functional component'lerde state yönetimi sağlar. useState hook'u, bir state değişkeni ve onu güncellemek için bir fonksiyon döndürür. State güncellemeleri, asenkron olarak gerçekleşir ve component re-render'ına neden olur. useState, primitive değerler, objeler ve array'ler için kullanılabilir.

useEffect, side effect'leri yönetir. useEffect hook'u, component mount, update ve unmount aşamalarında çalışır. Dependency array, effect'in ne zaman çalışacağını kontrol eder. Boş dependency array, effect'in sadece mount'ta çalışmasını sağlar. Dependency array'de değişiklik olduğunda, effect yeniden çalışır.

useContext, Context API ile state paylaşımı sağlar. useContext hook'u, context değerine erişmeyi kolaylaştırır. Context API, prop drilling problemini çözer ve global state paylaşımı sağlar. Ancak, Context API, tüm consumer'ları re-render eder, bu yüzden dikkatli kullanılmalıdır.

useReducer, karmaşık state logic için kullanılır. useReducer, Redux pattern'ini component seviyesine taşır. useReducer, karmaşık state güncellemeleri ve multiple sub-values için idealdir. useReducer, useState'e göre daha fazla kontrol sağlar.

Custom Hooks ve Logic Paylaşımı

Custom hooks, stateful logic'i yeniden kullanılabilir hale getirir. Custom hooks, "use" ile başlamalıdır ve diğer hook'ları kullanabilir. Custom hooks, component'ler arasında logic paylaşımı sağlar ve kod tekrarını azaltır.

Yaygın custom hook örnekleri: useFetch (API çağrıları), useLocalStorage (local storage yönetimi), useDebounce (debounce logic), useToggle (toggle state) ve useWindowSize (window boyutu takibi). Custom hooks, uygulama genelinde kullanılabilir ve test edilebilir.

Custom hooks, business logic'i component'lerden ayırır ve kod organizasyonunu iyileştirir. Custom hooks, unit test edilebilir ve yeniden kullanılabilir. Bu yaklaşım, kod kalitesini artırır ve bakımı kolaylaştırır.

State Management Stratejileri ve Seçim Kriterleri

Local state (useState), component-specific state için kullanılır. Local state, sadece bir component içinde kullanılan state'tir. Local state, component'in kendi içinde yönetilir ve dışarıya expose edilmez.

Global state (Context API, Redux, Zustand), uygulama genelinde state paylaşımı için kullanılır. Global state, birden fazla component tarafından erişilir ve paylaşılır. Global state management, uygulama karmaşıklığına göre seçilmelidir.

Server state (React Query, SWR, Apollo Client), server'dan gelen veriler için kullanılır. Server state, caching, synchronization ve background updates gibi özellikler sunar. React Query ve SWR, server state management için popüler kütüphanelerdir.

State management seçimi, uygulama karmaşıklığına, ekip büyüklüğüne ve performans gereksinimlerine bağlıdır. Küçük uygulamalar için Context API yeterlidir. Orta ölçekli uygulamalar için Zustand veya Jotai idealdir. Büyük uygulamalar için Redux veya Recoil tercih edilir.

Redux ve Redux Toolkit ile State Management

Redux, predictable state container sağlar. Redux, single source of truth prensibine dayanır ve state değişikliklerini pure function'lar (reducer'lar) ile yönetir. Redux, time-travel debugging ve state persistence gibi özellikler sunar.

Redux'un temel kavramları: Store (state container), Actions (state değişiklik talepleri), Reducers (state güncelleme fonksiyonları) ve Dispatch (action gönderme mekanizması). Redux, unidirectional data flow sağlar ve state değişikliklerini tahmin edilebilir hale getirir.

Redux Toolkit, modern Redux geliştirmeyi kolaylaştırır. createSlice, action ve reducer tanımlamayı basitleştirir. configureStore, Redux store'u yapılandırmayı kolaylaştırır. RTK Query, server state management için kullanılır ve API çağrılarını otomatikleştirir.

Redux DevTools, Redux state'ini inspect etmeyi ve time-travel debugging yapmayı sağlar. Redux DevTools, development ortamında kritik bir araçtır ve debugging sürecini hızlandırır.

Zustand, Jotai ve Modern Alternatifler

Zustand, minimal bir state management kütüphanesidir. Zustand, Redux'a göre daha basit bir API sunar ve daha az boilerplate gerektirir. Zustand, küçük ve orta ölçekli uygulamalar için idealdir. Zustand, hook-based API kullanır ve TypeScript desteği sunar.

Jotai, atomic state management sağlar. Jotai'de, her atom, bağımsız bir state parçasıdır. Jotai, fine-grained reactivity sağlar ve performansı optimize eder. Jotai, sadece ilgili component'leri re-render eder ve gereksiz re-render'ları önler.

Recoil, Facebook tarafından geliştirilen atom-based state management kütüphanesidir. Recoil, React ekosistemi ile yakın entegrasyon sağlar ve async state management için güçlü özellikler sunar. Recoil, büyük ölçekli uygulamalar için idealdir.

Server State Management: React Query ve SWR

React Query (TanStack Query), server state management için güçlü bir kütüphanedir. React Query, caching, background updates, pagination ve infinite scrolling gibi özellikler sunar. React Query, API çağrılarını otomatikleştirir ve server state'i yönetir.

SWR (stale-while-revalidate), Vercel tarafından geliştirilen bir data fetching kütüphanesidir. SWR, caching, revalidation ve error handling sağlar. SWR, React Query'ye göre daha basit bir API sunar ve küçük projeler için idealdir.

Server state management, client state management'tan farklıdır. Server state, caching, synchronization ve background updates gerektirir. React Query ve SWR, bu ihtiyaçları karşılar ve server state yönetimini kolaylaştırır.

Performance Optimizasyonu ve Best Practices

State management best practices: State'i mümkün olduğunca local tutmak, gereksiz re-render'ları önlemek, state normalization kullanmak ve memoization teknikleri uygulamak. useMemo ve useCallback, performans optimizasyonu için kullanılır.

useMemo, expensive computation'ları cache'ler ve sadece dependency'ler değiştiğinde yeniden hesaplar. useCallback, fonksiyon referanslarını cache'ler ve gereksiz re-render'ları önler. React.memo, component memoization sağlar ve prop değişikliklerinde re-render'ı kontrol eder.

State normalization, nested state yapılarını düzleştirir ve state güncellemelerini kolaylaştırır. Normalized state, performansı artırır ve state yönetimini basitleştirir. Normalizr ve Immer gibi kütüphaneler, state normalization ve immutability sağlar.

State Management Pattern'leri ve Anti-Pattern'ler

State management pattern'leri: Container/Presentational pattern, Custom hooks pattern ve Compound components pattern. Bu pattern'ler, state yönetimini organize eder ve kod kalitesini artırır.

State management anti-pattern'ler: Prop drilling, over-normalization, premature optimization ve global state abuse. Bu anti-pattern'ler, uygulama performansını ve maintainability'yi olumsuz etkiler.

Sonuç ve Öneriler

React Hooks ve modern state management, React uygulama geliştirmeyi kolaylaştırır. Doğru state management stratejisi seçimi, uygulama performansını ve bakımını iyileştirir. useState ve useEffect, çoğu durumda yeterlidir. Ancak, karmaşık uygulamalarda, Redux, Zustand veya React Query gibi kütüphaneler, state yönetimini kolaylaştırır.

Yeni bir React projesine başlıyorsanız, önce useState ve useEffect ile başlayın. Uygulama büyüdükçe, Context API veya Zustand gibi hafif çözümlere geçin. Büyük ölçekli uygulamalar için, Redux veya Recoil gibi güçlü çözümler tercih edilir. Server state için, React Query veya SWR kullanın. State management seçimi, uygulama gereksinimlerine göre yapılmalıdır.