Redux Hookları, uygulamanızın state yönetimini kolaylaştıran React kütüphaneleridir useDispatch ile Redux store üzerindeki dispatch işlevine erişerek, state'in güncellenmesini kolaylaştırabilirsiniz useSelector ile sadece ihtiyacınız olan state'lere erişerek performansı arttırabilirsiniz useMemo ise, useSelector ile kullanılabilir ve anlamsız tekrarlamaları önleyerek uygulama performansını arttırır Redux Hookları ile kodlama süreci daha esnek ve okunaklı hale gelir

Redux, uygulamanızın state yönetiminde kullanabileceğiniz bir kütüphanedir. Ancak, Redux kullanmanın birçok zorluğu vardır. Bu zorluklar, kullanımını kısıtlar ve kodun okunurluğunu azaltır.

Redux Hookları, bu zorluklarla başa çıkmak için oluşturulmuştur. Bu Hooklar, Redux'u daha esnek ve kullanımı kolay hale getirir.

Bu yazıda, Redux Hooklarına genel bir bakış sunacağız ve kullanımının önemini açıklayacağız.

useDispatch()

Redux Hooklarından biri olan useDispatch(), Redux store üzerindeki dispatch işlevine erişim sağlar. Bu işlev, storun içindeki state'in güncellenmesi için kullanılır. useDispatch() kullanımı, karmaşık bir kodlama yapısı ile Redux store'a dispatch işlevini yazmaktan kaçınır ve bu sayede kodlama sürecini basitleştirir. useDispatch(), aynı zamanda React bileşenleri içerisinde dispatch işlevinin kullanımını sağlayarak, verimliliği arttırır.

useDispatch() kullanımı, aşağıdaki örnekte olduğu gibi oldukça basittir. Örneğin; bir counter bileşeni içerisinde "arttır" butonuna tıklandığında, store içerisindeki count değerini artırmak istiyoruz. Bu işlem, useDispatch() ile oldukça kolay bir şekilde yapılabiliyor. Öncelikle reducer dosyasında count state'ini güncellemek için işaretleyici ekliyoruz:

const initialState = {  count: 0};function reducer(state = initialState, action) {  switch(action.type) {    case 'INCREMENT':      return { count: state.count + 1 };    default:      return state;  }}

Ardından, bileşenimizde useDispatch() kullanarak dispatch işlevini kullanabiliriz:

import { useDispatch } from 'react-redux';function Counter() {  const dispatch = useDispatch();  function handleClick() {    dispatch({ type: 'INCREMENT' });  }  return (    
      
Count: {count}
      Arttır    
  );}

Bu örnekte görüldüğü gibi, handleClick() fonksiyonu içerisinde dispatch işlevini kullanarak count state'ini güncelliyoruz. Bu sayede, Redux store'da count değeri artmış oluyor. useDispatch() kullanımı oldukça basit ve kodlama işlemlerini kolaylaştırır.

useSelector()

useSelector() hook'u, Redux'ta tutulan tüm state'e erişmek için kullanılan bir state seçicisidir. Bu sayede, bir bileşen sadece ihtiyacı olan bir kısmı alarak state'e erişebilir. Bu state erişimi, performans ve optimizasyon açısından oldukça önemlidir.Özellikle büyük uygulamalarda, tüm state'e her zaman ihtiyaç duyulmaz. useSelector() hook'u ile yalnızca ihtiyacımız olan kısımlara erişerek, performansı arttırabiliriz. Kullanımı oldukça basittir. Öncelikle, useSelector() hook'unu kullanacağınız bileşende "react-redux" modülünü içeri aktarmanız gerekmektedir. Ardından, useSelector() hook'unu kullanarak state seçicisi oluşturabilirsiniz. Örneğin, "todos" state'ine erişmek için aşağıdaki örneği kullanabilirsiniz:```import { useSelector } from 'react-redux'const TodoList = () => { const todos = useSelector(state => state.todos) return (

{todos.map(todo => (
• {todo.text}
))}

)}export default TodoList```Yukarıdaki örnek, state'deki "todos" verisine erişmek için useSelector() fonksiyonunu kullanmıştır. Daha sonra, "todos" verisini haritalayarak bir liste oluşturmuştur.Ayrıca, useSelector() ile birden fazla state'e de erişebilirsiniz. Bunun için, state'in adını belirterek useSelector() fonksiyonunu birden fazla kez kullanmanız gerekmektedir. Örneğin:```import { useSelector } from 'react-redux'const Counter = () => { const count = useSelector(state => state.count) const isEven = useSelector(state => state.isEven) return ( )}export default Counter```Yukarıdaki örnek, "count" ve "isEven" state'lerine erişmek için useSelector() fonksiyonunu kullanmıştır. Daha sonra, bu state'leri bileşen içinde kullanarak, gerekli işlemleri gerçekleştirmiştir.

useMemo()

useMemo() hooks can be used in conjunction with useSelector() hooks to optimize the performance of your React applications. useMemo() is responsible for memoizing expensive functions that compute some value based on some input. If you are using useSelector() to select data from your state, you can use useMemo() to avoid unnecessary re-execution of the function and prevent your application from slowing down.

For instance, let's say you have a large dataset and a component that lists all of the items in the dataset. If your dataset is updated frequently, and your component is quite large, your application may slow down drastically. However, if you utilize useMemo(), you can improve the performance of your application and prevent unnecessary re-renders.

Here is an example of how to use useMemo() in conjunction with useSelector():

```import React, { useMemo } from 'react';import { useSelector } from 'react-redux';

const MyComponent = () => { const dataset = useSelector(state => state.dataset);

const memoizedData = useMemo(() => { // do expensive computation with the dataset // return the computed value }, [dataset]);

return (

{memoizedData.map(item => (
• {item.name}
))}

);};```

In this example, we have used useMemo() to compute the memoizedData value based on the dataset value. Whenever the dataset value changes, the expensive computation will run, which is memoized, and the computed value will be returned, thereby optimizing the performance of the component.

Overall, useMemo() is a useful hook that can help optimize the performance of your React application when used in conjunction with useSelector().

useEffect()

React bileşenlerindeki yaşam döngüsü yönetimi, class bileşenleri kullanıldığında componentDidMount, componentDidUpdate ve componentWillUnmount fonksiyonları gibi yöntemler aracılığıyla gerçekleştirilir. Ancak fonksiyon bileşenleri kullanıldığında bu yöntemler kullanılamaz. Bunun yerine useEffect() hook'unu kullanmak gerekir. Bu yöntem, bileşenin açılışında (componentDidMount), güncellenmesinde (componentDidUpdate) ve kapatılmasında (componentWillUnmount) çalışır.

useEffect() fonksiyonu içindeki callback fonksiyonu, bileşenin açılması, güncellenmesi veya kapatılması gibi herhangi bir işlem gerçekleştiğinde çalıştırılır. Bu sayede bileşen içindeki state değiştiğinde veya iletişim kurulan API'de değişiklik olduğunda useEffect() fonksiyonu ile ilgili işlemler gerçekleştirilebilir.

Bu hook'un kullanımı şöyle bir yapıda gerçekleştirilir:

useEffect(() => {  // burada yapılacak işlemler yer alır}, dependencies);

Kod bloğu içinde yer alan ilk parametre, useEffect() fonksiyonunun çalıştırılmasını sağlayacak işlemler yer alır. İkinci parametre olarak dependencies, daha önce bu hook'un kullanımı sırasında yapılan işlemlerin bellek yönetimini yönetmek için kullanılır. ComponentDidUpdate yönteminden farklı olarak useEffect() hook'u, herhangi bir parametre belirtilmemişse bile her bileşen güncelleştirmesi sırasında çalışır. Bu durum performans sorunlarına yol açabilir. Bu nedenle, dependencies parametresinde değişkenler belirtilerek belirli bir bileşen güncelleştirmesi durumunda hook'un çalıştırılma durumu kontrol edilebilir.

Örneğin, bir ürün listesi sayfasında kullanıcının kategori seçeneği değiştirmesi durumunda kullanılacak olan useEffect() fonksiyonunun çalışması için dependencies içine seçim değişkenleri yazılır.

useEffect(() => {  fetchProducts(category);}, [category, sortBy]);

Yukarıdaki kod bloğunda, category ve sortBy değişkenleri dependency olarak belirtilerek, bu değişkenler içeriklerinde herhangi bir değişiklik olması durumunda fetchProducts fonksiyonunun tekrar çağrılması sağlanır. Bu sayede müşterinin seçimine göre ürünlerin yenilenmesi sağlanır.

useCallback()

React uygulamalarında, çocuk bileşenlerin performansını artırmak için callback fonksiyonlarının kullanılması önemlidir. useCallback() hook'u, bu fonksiyonların kullanımını optimize etmek için kullanılır.useCallback() hook'u, bir callback fonksiyonunun önbelleğe alınarak, herhangi bir bileşenin yeniden render edilmesinden önce önceden hesaplanmış olmasını sağlar. Bu, performans artışı sağlar çünkü callback fonksiyonu yeniden hesaplanmadan önce önbellekde saklanmış olacaktır.Genellikle, useCallback() hook'u, bir çocuk bileşeninin props aracılığıyla bir ebeveyn bileşene geçirilen bir fonksiyonu alması durumunda kullanılır. Bu işlev, her seferinde yeniden hesaplanıp sık sık yeniden render edildiğinde, performans sorunlarına neden olabilir. useCallback() hook'u bu sorunları ortadan kaldırır.Aşağıdaki örnek, useCallback() hook'u ile uygulama performansını iyileştirmek için bir callback fonksiyonunun nasıl kullanılabileceğini gösterir:```import React, { useCallback, useState } from 'react';function App() { const [count, setCount] = useState(0); const increment = useCallback(() => { setCount(count + 1); }, [count]); return ( );}```Burada, increment() fonksiyonu useCallback() hook'u kullanılarak tanımlanır. Bu hook, count değişkeninde herhangi bir değişiklik olduğunda yeniden hesaplanan bir önbellek işlevi oluşturur. Bu, performansı artıran bir yaklaşımdır. Bu örnekte, count değişkeni her arttırıldığında bir yeniden hesaplama işlemi yapmak yerine sadece önbellekteki fonksiyonun bir sonraki kullanımı için güncellenir. useCallback() hook'u, önbellekte saklanan bir işlevin kullanılması sayesinde uygulamanın performansını artırır.Sonuç olarak, useCallback() hook'u, React uygulamalarında callback fonksiyonlarının performansını artırmak için kullanılabilir. Optimize edilmiş bir callback fonksiyonu kullanmak, bileşenlerin daha hızlı yeniden render edilmesini sağlar ve uygulamanın performansını artırır. Böylece, bu hook React uygulamalarında performans sorunlarına karşı etkili bir çözüm sağlar.

useRef()

Redux Hookları içinde bir diğer önemli hook, useRef() işlevi olarak karşımıza çıkar. useRef() işlevi, React bileşenleri içinde değişkenlerin tutulması ve referansları üzerinden değişiklik yapılması için kullanılır. Bu işlev, genellikle DOM elemanlarına erişim sağlamak, animasyonlar oluşturmak veya önceki değerleri tutmak için kullanılır.

useRef() işlevi, useRef() hook'unu kullanarak bir nesne oluşturur ve bu nesne bileşenin ömrü boyunca korunur. useRef() işlevi, değişkenleri güncellemeden bileşenler arasında veri taşıma imkanı sağlar. Bu sayede, bir bileşen diğerine props ile veri göndermek yerine, useRef() işlevi ile eşleştirilmiş referans nesnesi kullanarak bu işlem gerçekleştirilebilir.

Örneğin, bir sayfa içindeki input alanlarının, seçeneklerin ve butonların değerlerinin kopyalanarak işlem yapılması gereken durumlar olabilir. Bu durumda useRef() işlevini kullanarak, gerek duyulan bileşenler üzerinde değişiklik yapılabilir. useRef() işlevi aynı zamanda animasyonlar oluşturmak için de kullanılabilir. Bu işlev sayesinde bileşenin animasyona ait önceki değerleri, sonraki değerlerle karşılaştırılıp animasyon sağlanabilir.

Tablo örneği kullanarak useRef() işlevinin kullanım alanlarına daha detaylı bir bakış atabiliriz:

Ref	Açıklama
setTimeout()	Belirli bir süre sonunda bir işlem yapmak için kullanılır
setInterval()	Belli aralıklarla bir işlem yapmak için kullanılır
scrollTo()	Sayfa kaydırmak için kullanılır

Yukarıdaki örnekte useRef() işlevi kullanılarak setTimeout(), setInterval() ve scrollTo() gibi işlemler gerçekleştirilebilir. useRef() işlevi, bu işlemlerin gerçekleşmesi sırasında değişkenlerin tutulmasını ve referanslarının korunmasını sağlar.

Sonuç olarak, useRef() işlevi React bileşenleri içinde değişkenleri tutmak ve referansları üzerinden değişiklik yapmak için kullanılır. Bu işlev sayesinde, DOM elemanlarına erişim sağlamak veya önceki değerleri tutmak gibi işlemler gerçekleştirilebilir. Animasyonlar oluşturmak için de useRef() işlevi kullanılabilir. Bu nedenle, useRef() işlevinin React uygulamalarında verimli bir şekilde kullanımı oldukça önemlidir.

useContext()

React uygulamalarında, aynı veriye birden fazla bileşen erişebilir. Ancak, her bileşenin kendine özgü bir state'i olduğunda, bu veriye erişmek zorlaşır. Bu durumu önlemek için useContext() hook'u kullanılır. Bu hook, state'in uygulama içindeki her bileşene aynı anda görünür olmasını sağlar. Bu sayede, bir bileşende yapılan değişiklikler tüm uygulamayı etkiler.

useContext() hook'u kullanarak, bileşenler arasında veri paylaşımı yapıldığında, component tree üzerinde tekrar tekrar state almak yerine tek bir yerden state alınarak uygulamanın performansı arttırılır. Ayrıca, kodun okunabilirliği de arttırılır ve olası hata durumlarında da daha rahat hata ayıklama işlemi yapılabilir.

Bir örnek senaryo olarak, kullanıcının seçimine göre bir tema ayarlamak isteyen bir uygulamayı ele alalım. Bu temayı uygulamanın tamamına yansıtmak gerektiğinde useContext() kullanarak tek bir yerden theme state'i alabiliriz. Örneğin:

```import React, { createContext, useContext } from "react";

// Tema için context oluşturulmasıconst ThemeContext = createContext("light");

// Theme'i uygulama genelinde paylaşmak için provider'in oluşturulmasıfunction App() { return (