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. useEffectin 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!