giriiş

Kanca useEffect, bilmeniz gereken önemli React kancalarından biridir. Herhangi bir değişiklik olduğunda fonksiyonel bileşenlerde yan etkiler yapmanızı sağlar. Yani useEffectkanca ile React'te veri almak, DOM ile çalışmak ve çok daha fazlasını yapmak gibi birçok şeyi yapabilirsiniz.

Bu yazıda, bazı pratik örneklerle React'teki UseEffect kancasını öğreneceğiz. Hemen konuya girelim.

UseEffect nasıl kullanılır?

Kanca useEffectiki parametre kabul eder. İlki, bir geri arama işlevi olan zorunludur. Öte yandan, ikinci parametre (değer dizisi veya boş bir dizi) isteğe bağlıdır ve uygulamamızda belirli bir değerin oluşturulduğu andan sonra kancanın çalışmasını istediğimizde kullanırız.

Hook'u kullanmaya başlamak için useEffectönce onu React paketinden içe aktarmanız gerekir.

İşte bir örnek:

import React, { useEffect } from 'react';

Uygulamanızdaki herhangi bir şey güncellendiğinde ve bir şeyler yapmak istediğinizde, useEffect. Aşağıdaki örnek, gövdenin arka planını şu şekilde değiştirmek için DOM'a erişir useEffect:

useEffect(()=>{
  document.body.style.background = "black";
});

İşte örnek:

useEffect(()=>{
  document.body.style.background = "blue";
},[]);

Bileşenimizde belirli bir değer değiştiğinde de yan etkiler gerçekleştirebiliriz.

İşte bir örnek:

useEffect(()=>{
  console.log('Only run on name change')
},[name]);

temizleme işlevi

Uygulamanızın çok sayıda yan etki tanımlaması gerektiğinde, meydana geldiğinde her bir yan etkiyi temizleyecek bir temizleme işlevi kullanmanız gerekecektir. Aksi takdirde uygulama performansınızı etkilersiniz.

Bir kullanıcı sayfayı yeniden boyutlandırdığında ekran genişliğini piksel olarak gösteren bir web sayfanızın olacağı basit bir örnek alalım. Bunun için bir resize olayına ihtiyacımız olacak.

İşte örnek:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const App = () =>{
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(()=>{
    window.addEventListener("resize", ()=>{
      setScreenWidth(window.innerWidth);
    });
    // Return the cleanup function which cleans the effect(event).
    return ()=>{
      window.removeEventListener("resize", ()=>{
        setScreenWidth(window.innerWidth);
      });
    }
  });
return <>
  <div>{screenWidth}</div>
  </>
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
  rootElement
);

Temizleme işlevi, geri çağırma işlevinin içinde döndürülür ve olayları gerçekleştikten sonra kaldırmamızı sağlar.

UseEffect ile veri alma

Kancanın bir başka yan etkisi de useEffectAPI'lerden veri almaktır. Verilerinizi Vanilla JavaScript ile yaptığınız gibi getirebilirsiniz, useEffectkullanıyorsanız bunu kancanın geri çağırma işlevi içinde yapmanız .then()ve catch()iade edilen sözü yerine getirmeniz yeterlidir.

GitHub API'sinden kullanıcı verilerini almaya bir örnek:

const App = ()=>{
 // The API URL.
 const APIurl = 'https://api.github.com/users';
 
// useState.
 const [users, setUsers] = useState([]);
 
// useEffect.
 useEffect(()=>{
  fetch(APIurl)
   .then(res => res.json())
   .then(data => setUsers(data));
},[]);
return(
<>
 <ul>
 {users.map(user => (
  <li key={user.id}>{user.login}</li>
 ))}
 </ul>
</>
)
}

İşte bir örnek:

const App = ()=>{
// The API URL.
  const APIurl = 'https://api.github.com/users';
// useState.
  const [users, setUsers] = useState([]);
// useEffect.
  useEffect(()=>{
    getUser();}
    ,[]);
// Separate function.
  async function getUser() {
    const response = await fetch(APIurl);
    const data = await response.json();
    setUsers(data);
  }return(
    <>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
    </>
  );
}

Çözüm

useEffectReact ile uğraşırken anlamanız gereken en önemli kancadır. İşlevsel bileşenlerde kolayca özellik eklemenize ve yan etkiler gerçekleştirmenize olanak tanır.

Bu makaleyi okuduğunuz için teşekkür ederiz. Umarım faydalı bulmuşsunuzdur.

Daha fazla okuma

JavaScript ve web geliştirme ile ilgili daha faydalı içeriklerle ilgileniyorsanız, bültenime abone olabilirsiniz.