React 18’de Bilmeniz Gereken 15 Temel Hook (Örneklerle)

React 18’de Bilmeniz Gereken 15 Temel Hook (Örneklerle)

React 18, uygulama geliştirme deneyimini iyileştiren birçok yeni özellik ve geliştirmeyle geldi. Bu yeni özelliklerden biri de **Hooks**’tur. Hooks, React bileşenleri içindeki mantığı ve durumu yönetmek için daha esnek ve yeniden kullanılabilir bir yol sunar. Bu makalede, React 18’de kullanabileceğiniz 15 temel Hook’u ve örnekleriyle birlikte inceleyeceğiz.

useState Hook

useState Hook, bir bileşenin içindeki durumu yönetmenizi sağlar. Bu hook, bir durum değeri ve bu değeri güncellemek için bir fonksiyon döndürür.

“`javascript
import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

return (

);
}

export default Counter;
“`

Bu örnekte, useState hook’u kullanarak count adlı bir durum değişkeni oluşturuyoruz. setCount fonksiyonunu kullanarak count değişkenini güncelliyoruz. Her tıklamada, count değeri 1 artırılıyor ve sayfa güncelleniyor.

useEffect Hook

useEffect Hook, bir bileşenin yan etkilerini (side effects) yönetmenizi sağlar. Yan etkiler, bir bileşenin DOM ile etkileşime girmesi veya ağ istekleri göndermesi gibi işlemlerdir.

“`javascript
import React, { useState, useEffect } from ‘react’;

function FetchData() {
const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => setData(data));
}, []);

return (

);
}

export default FetchData;
“`

Bu örnekte, useEffect hook’u kullanarak bir API’den veri çekiyoruz. useEffect içindeki kod, bileşen ilk kez render edildiğinde çalıştırılıyor. data durum değişkeni, alınan verileri tutuyor ve sayfa güncelleniyor.

useContext Hook

useContext Hook, bir bileşenin React Context’indeki değere erişmesini sağlar. Context, React uygulamalarında veri paylaşımı için kullanılan bir mekanizmadır.

“`javascript
import React, { createContext, useContext, useState } from ‘react’;

const ThemeContext = createContext();

function ThemeProvider({ children }) {
const [theme, setTheme] = useState(‘light’);

return (

{children}

);
}

function ThemeConsumer() {
const { theme, setTheme } = useContext(ThemeContext);

return (

);
}

function App() {
return (



);
}

export default App;
“`

Bu örnekte, ThemeContext adında bir context oluşturuyoruz. ThemeProvider bileşeni, ThemeContext‘i kullanarak bir tema değeri ve bu değeri güncellemek için bir fonksiyon sağlıyor. ThemeConsumer bileşeni, useContext hook’u kullanarak ThemeContext‘teki değere erişerek tema değerini görüntülüyor ve bu değeri güncelleyebiliyor.

useRef Hook

useRef Hook, bir bileşenin DOM elemanlarına veya diğer değerlere bir referans oluşturmanızı sağlar.

“`javascript
import React, { useRef } from ‘react’;

function FocusInput() {
const inputRef = useRef(null);

const handleClick = () => {
inputRef.current.focus();
};

return (

);
}

export default FocusInput;
“`

Bu örnekte, useRef hook’u kullanarak inputRef adında bir referans oluşturuyoruz. inputRef.current ile input elemanına erişebiliyoruz ve handleClick fonksiyonu ile input elemanını odaklıyoruz.

useCallback Hook

useCallback Hook, bir fonksiyonu belleğe almanıza (cache) yardımcı olur. Bu, fonksiyonun aynı argümanlar için tekrar tekrar yeniden oluşturulmasını önleyerek performansı artırır.

“`javascript
import React, { useCallback, useState } from ‘react’;

function CounterWithCallback() {
const [count, setCount] = useState(0);

const increment = useCallback(() => {
setCount(count + 1);
}, [count]);

return (

);
}

export default CounterWithCallback;
“`

Bu örnekte, useCallback hook’u kullanarak increment fonksiyonunu belleğe alıyoruz. increment fonksiyonu, yalnızca count değeri değiştiğinde yeniden oluşturulacak. Bu, performansı artırır çünkü increment fonksiyonu her render’da yeniden oluşturulmuyor.

useMemo Hook

useMemo Hook, bir değeri belleğe almanıza (cache) yardımcı olur. Bu, değerin aynı girdiler için tekrar tekrar hesaplanmasını önleyerek performansı artırır.

“`javascript
import React, { useMemo, useState } from ‘react’;

function ExpensiveCalculation() {
const [number, setNumber] = useState(0);

const expensiveCalculation = useMemo(() => {
console.log(‘Hesaplama yapılıyor…’);
return number * 10;
}, [number]);

return (

);
}

export default ExpensiveCalculation;
“`

Bu örnekte, useMemo hook’u kullanarak expensiveCalculation değerini belleğe alıyoruz. expensiveCalculation, yalnızca number değeri değiştiğinde yeniden hesaplanacak. Bu, performansı artırır çünkü expensiveCalculation her render’da yeniden hesaplanmıyor.

useReducer Hook

useReducer Hook, karmaşık durum güncellemelerini yönetmenizi sağlar. Bu hook, bir indirgeyici (reducer) fonksiyonu ve başlangıç durumu alır ve durum güncellemek için bir fonksiyon döndürür.

“`javascript
import React, { useReducer } from ‘react’;

const initialState = { count: 0 };

const reducer = (state, action) => {
switch (action.type) {
case ‘INCREMENT’:
return { count: state.count + 1 };
case ‘DECREMENT’:
return { count: state.count – 1 };
default:
return state;
}
};

function CounterWithReducer() {
const [state, dispatch] = useReducer(reducer, initialState);

return (

);
}

export default CounterWithReducer;
“`

Bu örnekte, useReducer hook’u kullanarak bir indirgeyici fonksiyonu ve başlangıç durumu tanımlayarak bir sayaç durumunu yönetiyoruz. dispatch fonksiyonu, durum güncellemek için kullanılan eylemleri (actions) tetikler.

useLayoutEffect Hook

useLayoutEffect Hook, useEffect hook’una benzer ancak render sonrasında, ancak DOM güncellenmeden önce çalışır. Bu, DOM ile etkileşim gerektiren görevler için faydalıdır.

“`javascript
import React, { useLayoutEffect, useRef, useState } from ‘react’;

function LayoutEffectExample() {
const [width, setWidth] = useState(0);
const divRef = useRef(null);

useLayoutEffect(() => {
if (divRef.current) {
setWidth(divRef.current.offsetWidth);
}
}, []);

return (

);
}

export default LayoutEffectExample;
“`

Bu örnekte, useLayoutEffect hook’u kullanarak bir div elemanının genişliğini ölçüyoruz. useLayoutEffect, DOM güncellenmeden önce çalıştığı için, div elemanının doğru genişliğini elde edebiliyoruz.

useTransition Hook

useTransition Hook, uzun süren işlemler sırasında kullanıcı deneyimini iyileştirmek için kullanılır. Bu hook, bir geçiş durumu (transition state) ve bir başlatma fonksiyonu döndürür.

“`javascript
import React, { useState, useTransition } from ‘react’;

function TransitionExample() {
const [isPending, startTransition] = useTransition();
const [items, setItems] = useState([]);

const handleClick = () => {
startTransition(() => {
setItems([…items, Math.random()]);
});
};

return (

);
}

export default TransitionExample;
“`

Bu örnekte, useTransition hook’u kullanarak bir listeye rastgele eleman ekleme işlemini geciktiriyoruz. startTransition fonksiyonu, geçiş işlemini başlatıyor ve isPending durumu, geçiş işleminin devam edip etmediğini gösteriyor. Bu sayede, kullanıcı deneyimini olumsuz etkilemeden listeye eleman ekleyebiliyoruz.

useId Hook

useId Hook, bir bileşenin içindeki elemanlara benzersiz kimlikler oluşturmanızı sağlar. Bu, özellikle dinamik olarak oluşturulan içeriklerde erişilebilirliği iyileştirmek için faydalıdır.

“`javascript
import React, { useId } from ‘react’;

function Accordion() {
const id = useId();

return (

);
}

export default Accordion;
“`

Bu örnekte, useId hook’u kullanarak dinamik olarak oluşturulan bir akordeon bileşeni için benzersiz kimlikler oluşturuyoruz. Bu, ekran okuyucularının akordeon içeriğine erişimini sağlamak için kullanılıyor.

useDeferredValue Hook

useDeferredValue Hook, bir değerin güncellenmesini geciktirmenizi sağlar. Bu, kullanıcı deneyimini iyileştirmek için faydalıdır, çünkü bir değer güncellenirken, kullanıcı arayüzü gecikmeden güncellenmeye devam edebilir.

“`javascript
import React, { useState, useDeferredValue } from ‘react’;

function DeferredValueExample() {
const [value, setValue] = useState(”);
const deferredValue = useDeferredValue(value);

return (

);
}

export default DeferredValueExample;
“`

Bu örnekte, useDeferredValue hook’u kullanarak bir input alanının değerini geciktirerek, kullanıcı arayüzünün gecikmeden güncellenmesini sağlıyoruz.

useSyncExternalStore Hook

useSyncExternalStore Hook, React’in dışındaki verileri senkronize etmenizi sağlar. Bu, React’in dışında bulunan bir veri kaynağı (örneğin bir veri deposu veya bir ağ isteği) tarafından güncellenen verileri senkronize etmek için kullanılır.

“`javascript
import React, { useSyncExternalStore } from ‘react’;

const getSnapshot = () => {
// Dış veri kaynağındaki verileri alın
const data = fetch(‘https://api.example.com/data’)
.then(response => response.json());
return data;
};

const subscribe = (callback) => {
// Dış veri kaynağına abone olun ve callback fonksiyonunu çağırın
// Dış veri kaynağındaki veriler güncellendiğinde
};

function ExternalData() {
const data = useSyncExternalStore(subscribe, getSnapshot);

return (

);
}

export default ExternalData;
“`

Bu örnekte, useSyncExternalStore hook’u kullanarak bir API’den gelen verileri senkronize ediyoruz. getSnapshot fonksiyonu, API’den verileri alıyor ve subscribe fonksiyonu, API’deki veriler güncellendiğinde bir callback fonksiyonunu tetikliyor.

useEvent Hook

useEvent Hook, bir olayı React içindeki bir fonksiyona bağlamanıza olanak tanır. Bu, olay işleyicilerini temizleme ve React bileşenlerinin dışındaki olaylara tepki verme gibi çeşitli senaryolarda faydalıdır.

“`javascript
import React, { useEvent, useState } from ‘react’;

function EventHookExample() {
const [count, setCount] = useState(0);
const handleClick = useEvent(() => {
setCount(count + 1);
});

return (

);
}

export default EventHookExample;
“`

Bu örnekte, useEvent hook’u kullanarak bir butona tıklandığında bir sayacın artmasını sağlıyoruz. useEvent, olay işleyicisinin her render’da yeniden oluşturulmasını önleyerek performansı iyileştiriyor.

useInsertionEffect Hook

useInsertionEffect Hook, React’in DOM’a ilk kez girdiğinde çalışan bir yan etki (side effect) oluşturmanızı sağlar. Bu hook, bir bileşenin ilk render’ında DOM’a eklenen özel DOM düğümlerinin oluşturulması gibi senaryolarda kullanılır.

“`javascript
import React, { useInsertionEffect, useRef } from ‘react’;

function InsertionEffectExample() {
const divRef = useRef(null);

useInsertionEffect(() => {
const div = divRef.current;
// DOM’a özel bir DOM düğümü ekleyin
});

return (

);
}

export default InsertionEffectExample;
“`

Bu örnekte, useInsertionEffect hook’u kullanarak DOM’a özel bir DOM düğümü ekliyoruz.

## Sonuç

React 18’de sunulan yeni Hooks’lar, React geliştirme deneyimini büyük ölçüde iyileştiriyor. Bu makalede, en yaygın kullanılan 15 temel Hook’u ve örnekleriyle birlikte ele aldık. Bu Hooks’lar, React uygulamalarında karmaşık durum yönetimi, yan etkiler, performans optimizasyonu ve daha birçok işlemi gerçekleştirmenize yardımcı olur.

Daha fazla bilgi edinmek için, React belgelerini ziyaret edebilirsiniz: https://reactjs.org/. Kendi React projelerinizi geliştirmek için ise fatihsoysal.com adresindeki kaynakları inceleyebilirsiniz.

#Etiketler
React, Hooks, React 18, useState, useEffect, useContext, useRef, useCallback, useMemo, useReducer, useLayoutEffect, useTransition, useId, useDeferredValue, useSyncExternalStore, useEvent, useInsertionEffect