React.js Hook’lar ve Kullanımları Part 1
Herkese merhaba!
React hookları, modern React uygulamalarında vazgeçilmez araçlar haline gelmiştir. useState, useEffect ve useContext gibi önemli hooklar, componentlerin durum yönetimi, yan etkiler ve veri paylaşımı gibi temel işlevleri sağlar. Bu blog yazısında, bu güçlü hookları ayrıntılı bir şekilde ele alacak ve nasıl kullanılacaklarına dair değerli bilgiler sunacağım.
1) useState Hook
React functional componentlerde useState; durum yönetimi için kullanılır.
State yönetimini yerine getirir ve functional componentler de durum
tutma özelliği kazandırır. Bu sayede, componentlerin durumu değiştiğinde tekrar render edilmeleri ve güncel verilerle ekrana yansıtılması sağlanır.
Örnek verecek olursak:
import React, { useState } from 'react';
function ExampleComponent() {
// Destructuring ile useState'den state ve setState alınır.
// "count" isimli bir state ve "setCount" isimli bir fonksiyon elde edilir.
const [count, setCount] = useState(0);
// Fonksiyonel bileşenin geri kalan kısmı
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Artır</button>
<button onClick={() => setCount(count - 1)}>Azalt</button>
</div>
);
}
Yukarıdaki örnekte, useState
hook'u kullanılarak count
adında bir durum (state) tanımladık ve başlangıç değeri olarak 0
verdik. Ardından, setCount
fonksiyonunu kullanarak count
durumunu güncelleyebiliriz. Artır ve Azalt butonlarına tıklandığında setCount
fonksiyonunu çağırarak count
değerini artırabilir veya azaltabiliriz. React, durumun değiştiğini algılayarak otomatik olarak componenti güncelleyecektir.
Özetle, useState
hook'u ile React functional componentlerde değişken değerleri tutabilir ve bu değerleri güncelleyebiliriz. Bu, componentlerin dinamik ve etkileşimli olmasını sağlar.
2) useEffect Hook
React functional componentlerde yan etkileri işlemek için kullanılır. Yan etkiler, componentlerin render edilmesi sırasında yapılan işlemlerdir ve örnek olarak API çağrıları, abonelikler, belirli durumlar gibi işlemler verilebilir. useEffect
sayesinde bu yan etkileri componentin yaşam döngüsü boyunca yönetebiliriz.
Örnek verecek olursak;
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [data, setData] = useState([]);
// useState ile initial datası boş array olan bir state oluşturdum.
// useEffect kullanarak bileşenin ilk render edildiği anda çalışması için bir
// tanımlama yapıyoruz.
useEffect(() => {
// Burada API çağrısını gerçekleştiriyoruz.
// Örnek olarak, bir API'den veri alalım ve setData ile state'i güncelleyelim.
fetchDataFromAPI().then((response) => setData(response.data));
// useEffect'un ikinci parametresi olan dizi(dependency), bağımlılıkları belirtir.
// Eğer dizi boş bırakılırsa, useEffect render sonrasında çalışır.
// Eğer dizi içerisine bağımlılıklar eklenirse, sadece o bağımlılıklar değiştiğinde çalışır.
}, []);
useEffect(() => {
console.log(data);
// Dependency olarak data verdiğimde, yukarıda bahsettiğim gibi
// Yalnızca data değiştiğinde bu useEffect çalışarak konsola data'yı yazacaktır.
}, [data]);
// Fonksiyonel bileşenin geri kalan kısmı
return (
<div>
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
Yukarıdaki örnekte, useEffect
hook'u kullanarak fetchDataFromAPI
adında bir fonksiyonu çalıştırıyoruz. Bu fonksiyon bir API çağrısı yapıp veri alacak ve setData
fonksiyonu ile data
durumunu güncelleyecektir. useEffect
in ikinci parametresi olan boş dizi ([]
), etkinin sadece componentin ilk render edildiğinde çalışmasını sağlar.
İkinci örnekte ise useEffect
için bağımlılık belirttik, bu bağımlılık değiştiğinde useEffect
tekrar çalışacaktır.
3) useContext Hook
React’ta componentler arasında veri paylaşımını sağlamak için kullanılır. Bu hook, belirli bir context’i alıp onunla ilişkilendirilmiş verilere erişim sağlar. Context, bileşenler arasında paylaşılmak istenen verilerin anahtar-değer çiftlerini içeren bir yapıdır. useContext
sayesinde bu verilere herhangi bir ara component kullanmadan, prop drilling yapmadan doğrudan erişebiliriz.
Kullanımı için öncelikle bir context oluşturuyoruz:
import { createContext, useEffect, useState } from 'react';
export const MyContext = createContext();
// MyContext isimli context yapımızı createContext ile oluşturuyoruz.
const MyProvider = ({ children }) => {
// Contextimizde kullanmak istediğimiz state ve fonksiyonları belirliyoruz.
const [count, setCount] = useState(0);
const increaseCount = () => {
setCount(count + 1);
}
const decreaseCount = () => {
setCount(count - 1);
}
return (
<MyContext.Provider value={{count, increaseCount, decreaseCount}}>
{children}
</MyContext.Provider>
);
}
export default MyProvider;
Daha sonra oluşturduğumuz provideri kullanmak için index.js içerisinde ki <App /> componentimizi providerımız ile sarıyoruz :
import React from 'react';
import ReactDOM from 'react-dom';
import MyProvider from './providers/MyProvider.js';
// <App /> componentimizi providerımız ile sarıyoruz ve böylece App altında
// bulunan her componentte contextimizi kullanabileceğiz.
ReactDOM.render(
<React.StrictMode>
<MyProvider>
<App />
</MyProvider>
</React.StrictMode>,
document.getElementById('root')
);
Son olarak hazırlamış olduğumuz contextimizde ki valueları aşağıda ki gibi kullanıyoruz.
import React, { useContext } from 'react';
import MyContext from './MyContext';
function ChildComponent() {
const {count, increaseCount, decreaseCount} = useContext(MyContext);
// MyContext isimli context yapımızı useContext ile çağırıyoruz.
return
<div>
<p>{count}</p>
<button onClick={increaseCount}>Artır</button>
<button onClick={decreaseCount}>Azalt</button>
</div>;
}
Böylelikle MyContext içerisinde oluşturduğumuz fonksiyon ve statelere alt componentlerde de kolaylıkla erişerek, datayı projemiz genelinde dağıtabiliyor prop drilling yapmak zorunda kalmıyoruz.
Diğer hooklar için ikinci yazıma bakabilirsiniz!