React'ta Side Effects ve useEffect Kullanımı

Merhaba arkadaşlar! Uzun yıldır React geliştiricisi olarak, bu yazımda sizlere React'ta side effects kavramından ve onunla nasıl başa çıkabileceğimize dair örneklerle anlatmak istediğim useEffect hook'unun kullanımından bahsedeceğim.

Side Effects Nedir?

React bileşenleri genellikle saf fonksiyonlardır, yani verilen girdilere göre sabit bir çıktı üretirler. Ancak, bazı durumlarda bileşenlerimizin dış dünya ile etkileşime girmesi gerekebilir. İşte bu tür etkileşimlere side effects (yan etkiler) denir. Side effects şunları içerebilir:

• Veri almak veya göndermek

• Abonelikleri yönetmek

• DOM'a manuel olarak müdahale etmek

• Zamanlayıcılar kullanmak

Bu tür işlemler, bileşenlerin düzgün çalışması için önemlidir ancak doğru şekilde yönetilmezse karmaşaya yol açabilir. İşte burada useEffect devreye giriyor!

useEffect Kullanımı

React Hooks sayesinde, fonksiyonel bileşenlerde de side effect'leri yönetebiliriz. useEffect hook'u, yan etkileri yönetmek ve bileşenlerimizin yaşam döngüsüne müdahale etmek için kullanılır. Şimdi temel kullanımı ve örneklerle bu hook'u inceleyelim.

Temel Kullanım

useEffect fonksiyonunu kullanmak için öncelikle React'tan içe aktarmanız gerekir:

import React, { useEffect } from 'react';

useEffect fonksiyonu, bir bileşen render edildiğinde çalışacak bir callback fonksiyonu ve isteğe bağlı olarak bağımlılıkları belirten bir dizi alır. İşte temel kullanımı:

useEffect(() => {
  // Yan etkileri burada yönetin

  return () => {
    // İsteğe bağlı temizleme işlemleri
  };
}, [/* bağımlılıklar */]);

Örnek: Veri Çekmek

Bir API'dan veri çekmek gibi bir yan etkiyi yönetmek için useEffect kullanalım. Aşağıdaki örnek, userId değişkenine bağlı olarak bir kullanıcının bilgilerini getiren bir bileşendir.

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

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
      setIsLoading(false);
    };

    fetchData();
  }, [userId]);

  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <h2>{user.name}</h2>
          <p>Email: {user.email}</p>
        </div>
      )}
    </div>
  );
};

Bu örnekte, useEffect hook'u userId değişkenine bağımlı olarak veri çekme işlemini gerçekleştirir. Eğer userId değişirse, useEffect callback'i yeniden çalışır ve yeni verileri getirir.

Örnek: Abonelikleri Yönetmek

Bir WebSocket aboneliği gibi sürekli güncel veri akışı gerektiren durumlarda da useEffect kullanabiliriz. İşte bir örnek:

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

const LiveChat = ({ chatId }) => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket(`wss://chat.example.com/${chatId}`);

    socket.onmessage = (event) => {
      const messageData = JSON.parse(event.data);
      setMessages((prevMessages) => [...prevMessages, messageData]);
    };

    return () => {
      socket.close(); // Abonelik sonlandığında temizleme işlemi
    };
  }, [chatId]);

  return (
    <div>
      <h2>Live Chat</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>{message.text}</li>
        ))}
      </ul>
    </div>
  );
};

Bu örnekte, useEffect hook'u chatId değişkenine bağımlı olarak WebSocket aboneliğini yönetir. Eğer chatId değişirse, önceki abonelik kapatılır ve yeni bir abonelik başlatılır.

Sonuç olarak, useEffect hook'u, React bileşenlerinde side effect'leri yönetmek için güçlü ve esnek bir araçtır. Umarım bu yazıyla useEffect kullanımına dair fikir sahibi olmuşsunuzdur. Başarılar!