React Hooks Nedir?

Adı : React Hooks Nedir?

React, JavaScript tabanlı bir kütüphanedir ve web uygulamalarını geliştirmek için kullanılır. React, bileşen tabanlı bir yapıya sahip olduğu için uygulamanın her bir parçası ayrı bir bileşen olarak düşünülür ve bu bileşenlerdeki state (durum) ve props (özellikler) kullanılarak dinamik ve interaktif bir kullanıcı arayüzü oluşturulur. Geleneksel React sınıf bileşenleri ile bileşenlerin state yönetimi yapılırken, React Hooks ile bu işlem fonksiyonel bileşenler ile daha esnek ve düzenli bir şekilde gerçekleştirilebilir. Bu yazıda, React Hooks konusu detaylı bir şekilde ele alınacak ve örnekler derlenerek açıklanacaktır.

**1. React Hooks Nedir?**

React Hooks, React 16.8 sürümü ile kullanıma sunulan bir özelliktir. Bu özellik, fonksiyonel bileşenlerde state tutma, yaşam döngüsü olaylarını kullanma ve diğer bağlamları kullanabilme yeteneği sunar. Böylece, class bileşenlerinin karmaşıklığını ortadan kaldıran ve daha basit bir yöntem sunan bir yapı ortaya çıkar.

React Hooks, useState, useEffect, useContext ve useMemo gibi ön tanımlı birkaç kancaya (hook) sahiptir. Hooks'lar, bileşen içindeki state veya diğer React fonksiyonalitelerine erişmeyi sağlar.

**2. useState Hook**

useState, fonksiyonel bileşenlerde state tutmak için kullanılan bir Hook'tur. Bu hook, bir dize, sayı veya nesne gibi farklı tiplerdeki state değerlerini yönetmek için kullanılabilir. useState, bir dizi döndürerek, bu dizi üzerinden state değeri ve state değerini güncellemek için bir fonksiyon sunar.

Örnek kullanımı şu şekildedir:

```
import React, { useState } from 'react';

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

return (

);
}
```

Yukarıdaki örnekte, useState ile bir `count` state'i oluşturuldu ve bu state, `setCount` fonksiyonu ile güncellendi. `setCount(count + 1)` şeklinde bir onClick olayı ile count state'i arttırıldı.

**3. useEffect Hook**

useEffect, fonksiyonel bileşenlerde yaşam döngüsü olaylarına karşılık gelen işlemleri yapmak için kullanılan bir Hook'tur. ComponentDidMount, componentDidUpdate ve componentWillUnmount gibi işlemler useEffect ile gerçekleştirilebilir.

Örnek kullanımı şu şekildedir:

```
import React, { useState, useEffect } from 'react';

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

useEffect(() => {
document.title = `You clicked ${count} times`;
});

return (

);
}
```

Yukarıdaki örnekte, useEffect içindeki işlem, bileşenin her render edilişinde çalışır. Bu örnekte, count state'i her güncellendiğinde document.title güncellenir.

**4. useContext Hook**

useContext, fonksiyonel bileşenlerde bağlamı (context) kullanmak için kullanılan bir Hook'tur. Bağlam, bileşen ağacının tüm düğümlerine props geçmek yerine, belirli bir bileşenin alt ağacına değerleri geçmeyi sağlayan bir React özelliğidir. useContext ile bağlama erişmek ve kullanmak kolaylaşır.

Örnek kullanımı şu şekildedir:

```
import React, { useState, useContext } from 'react';

const ThemeContext = React.createContext('light');

function Example() {
const theme = useContext(ThemeContext);

return (

);
}
```

Yukarıdaki örnekte, createContext ile bir tema bağlamı oluşturulur. Bu bağlamı useContext ile kullanarak tema değerine erişilir.

**5. useMemo Hook**

useMemo, hesaplamalı bir değeri bellekte saklamak ve yeniden hesaplama maliyetini engellemek için kullanılır. Böylece, gereksiz hesaplamalar yapmaktan kaçınılır.

Örnek kullanımı şu şekildedir:

```
import React, { useState, useMemo } from 'react';

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

const expensiveCount = useMemo(() => {
let result = 0;
for (let i = 0; i < count; i++) {
result += i;
}
return result;