React Hooks’un Gücü

2018'de React Hooks sahneye çıktığında, JavaScript dünyası bir devrimin eşiğindeydi. React, sınıf bileşenleri üzerinden sağlanan state yönetimi ve yaşam döngüsü metotlarıyla uzun bir süre yönetilmişti. Ancak, Hooks’un sahneye girişiyle birlikte, React geliştiricilerine sınıf bileşenleri olmadan bile güçlü bir şekilde çalışabilme ve kodlarını daha temiz, okunabilir ve modüler bir hale getirme imkanı sunuldu.

Sınıflarla İlgili Sorunlar

React sınıfları, uzun bir süre boyunca React uygulamalarında temel yapı taşları olmuştur. Ancak, bazı durumlarda sınıflarla ilişkilendirilen bazı sorunlar ve zorluklar ortaya çıkabilir. İşte sınıflarla ilgili karşılaşılan bazı sorunlar:

Karmaşıklık ve Okunabilirlik:

Sınıflar, özellikle büyük projelerde, karmaşık hale gelebilir ve okunabilirliği azaltabilir. Sınıf bileşenlerinde yaşam döngü metotları, olay dinleyicileri ve diğer özellikler bir arada olduğundan, kodun anlaşılması zorlaşabilir.

this Bağlamı:

Sınıf bileşenlerinde, fonksiyonların içinde this bağlamını doğru bir şekilde ayarlamak önemlidir. Ancak, bu durum karmaşık hale gelebilir ve özellikle olay dinleyicileri gibi yerlerde sorunlara yol açabilir.

Kodu Daha Kapsamlı Hale Getirme:

Sınıf bileşenlerindeki özellikler, genellikle tek bir devasa obje içinde bulunur. Bu durum, kodun daha kapsamlı ve birbirine bağlı olmasına neden olabilir, bu da bakım ve geliştirme süreçlerini zorlaştırabilir.

Geliştirici Dostu Değil:

Bazı geliştiriciler için, sınıf tabanlı yazım tarzı karmaşıklığı artırabilir ve yeni başlayanlar için öğrenme eğrisini dikleştirebilir. Fonksiyonel bileşenler ve React Hooks’un tanıtılması, daha basit bir yazım stili sunarak bu sorunu hafifletti.

Performans:

Bazı durumlarda sınıf bileşenlerinin performansı, özellikle büyük uygulamalarda, sorunlara neden olabilir. Fonksiyonel bileşenler ve Hooks, React uygulamalarını daha hızlı ve verimli hale getirebilen optimizasyonlar sunar.

Birden Fazla HOC (Higher-Order Component) Kullanımı:

Sınıf bileşenleri ile birlikte birden fazla HOC kullanmak, bileşenlerin mantığını anlamayı zorlaştırabilir ve kodu karmaşık hale getirebilir. React Hooks’un tanıtılması, bu sınıf bazlı sorunlara bir alternatif sunarak React geliştirmeyi daha basit, okunabilir ve geliştirici dostu hale getirdi. Hooks, state yönetimi ve yaşam döngüsü yönetimi gibi konularda daha açık ve işlevsel bir yaklaşım sunar.

Hooks Nedir?

Hooks, işlev bileşenlerinizden durum, yaşam döngüsü yöntemleri ve bağlam gibi React özelliklerine “bağlanmanıza” olanak tanıyan işlevlerdir. Bazı yerleşik hook’lar şunları içerir:

• useState — durum bilgisi olan bir değer ve onu güncellemek için işlev döndürür
• useEffect — bileşenlerde yan etkiler gerçekleştirmenizi sağlar
• useContext — React bağlamını kullanmanızı sağlar

Hooks’u kullanarak React uygulamalarının tamamını yalnızca işlevlerle yazabilirsiniz; sınıflara gerek yoktur!

UseState Hook’u kullanma

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
re  );
}

useEffect Hook’u kullanma

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Boş bağımlılık dizisi, sadece bir kere çalışmasını sağlar

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Custom Hook’u kullanma

import { useState, useEffect } from 'react';

function useDataFetching(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading };
}

React Hooks, fonksiyonel programlama prensiplerini teşvik eder ve kodun daha okunabilir, sürdürülebilir ve düzenli olmasına olanak tanır. Bu, React geliştiricilerine daha güçlü ve esnek bir geliştirme deneyimi sunar.