React useEffect Nedir ? Nasıl Kullanılır ?

React, modern web uygulamaları geliştirmek için popüler bir JavaScript kütüphanesidir. React, bileşen tabanlı bir yapıya sahiptir ve bu yapı içerisinde bileşenlerin hayat döngüsünü yönetmek için bir dizi özellik sunar. useEffect hook'u da bu özelliklerden biridir ve bileşenlerde yan etkileri (side effects) yönetmek için kullanılır. Bu makalede, React'ta useEffect hook'unun ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu öğreneceksiniz.

React'ta useEffect Hook'u Nedir?

useEffect hook'u, React bileşenlerinde yan etkileri yönetmek için kullanılan bir React hook'udur. Yan etkiler, bileşenin render edilmesiyle doğrudan ilişkili olmayan işlemlerdir. Örneğin, ağ istekleri yapmak, abone olmak (subscribe), veri alışverişi gibi işlemler yan etki olarak adlandırılır. useEffect hook'u, bu tür yan etkileri bileşenin yaşam döngüsü boyunca yönetmek için kullanılır.

Kullanımı ve Örnekler:

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

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

  // useEffect kullanımı
  useEffect(() => {
    // Bu kod, her render işleminden sonra çalışır
    document.title = `Sayaç: ${count}`;
  });

  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Artır</button>
    </div>
  );
}

export default ExampleComponent;

Yukarıdaki örnekte, useEffect hook'u, bileşenin her render işleminden sonra çalışacak bir yan etki fonksiyonunu temsil eder. Bu yan etki fonksiyonu, her render işleminden sonra belirtilen yan etkiyi gerçekleştirir. Örneğin, bu örnekte, her render işleminden sonra sayfa başlığını güncellemek için kullanılır.

useEffect(() => {
  document.title = `Sayaç: ${count}`;
});

Bu kullanım, count state'i her güncellendiğinde sayfa başlığını güncellemek için etkili bir şekilde çalışır. useEffect hook'u içindeki fonksiyon, bileşen her güncellendiğinde çalıştırılır

React'ta useEffect hook'u, bileşenlerde yan etkileri yönetmek için güçlü bir araçtır. Bu makalede, useEffect hook'unun ne olduğunu, nasıl kullanıldığını ve neden önemli olduğunu öğrendiniz. Artık, React uygulamalarınızda bileşenler arasında yan etkileri yönetmek için useEffect hook'unu kullanabilirsiniz.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi