useEffect hook nasıl çalışıyor?

12 Tem 10:14

useEffect hook’un temel görevi, fonksiyonel bileşenlerin sınıf bileşenlerindeki life-cycle metodlarına (componentDidMount, componentDidUpdate, componentWillUnmount) eşdeğer davranışlar sergilemesini sağlamaktır. React’in sanal DOM’u yönetirken gerçek DOM’a yapılan değişikliklerin ardından yan etkilerini (side-effect) yönetmek için bu hook’a ihtiyacı vardır. Örneğin, API’den veri çekmek, DOM’da değişiklikler yapmak, event listener’ları eklemek ya da temizlemek gibi işlemler *yan etki* olarak değerlendirilir. useEffect olmadan fonksiyonel bileşenlerin bu tarz dinamik davranışları sergilemesi mümkün değildi — bu yüzden React 16.8’le birlikte hayata geçirildi. Hook’un çalışma prensibi basit: bileşen render edildikten sonra (veya bağımlılıkları değiştiğinde) çalıştırılır. İlk render sırasında `componentDidMount`, bağımlılıklar değiştiğindeyse `componentDidUpdate` davranışını sergiler. Temizleme işlemiyse (ki bu `componentWillUnmount`’a denk gelir) ya doğrudan bir fonksiyon döndürülerek ya da `useEffect`’in ikinci argümanı olan dependency array’inin yardımıyla otomatik olarak yapılır. Örneğin: ```jsx useEffect(() => { const listener = () => console.log("Scrolled!"); window.addEventListener("scroll", listener); return () => { window.removeEventListener("scroll", listener); // Temizleme }; }, []); // Sadece ilk render’da çalışır, dependency array’i boş ``` Burada `[]` dependency array’i boş olduğu için sadece bileşen mount olduğunda çalışır ve scroll event’ine listener ekler. Bileşen unmount olduğundayse (ya da bir hata oluşsa bile) geri döndürülen fonksiyon sayesinde dinleyici otomatik olarak kaldırılır — böylece memory leak’ler engellenir. Dependency array (`[dep1, dep2]`), effect’in ne zaman yeniden çalıştırılması gerektiğini belirler. Eğer dizi boşsa, sadece ilk render’da çalışır; dizi doluysa, içindeki değişkenlerden biri değiştiğinde effect tekrar tetiklenir. Bu mekanizma, gereksiz yeniden render’ları ve API çağrılarını önlemek için kritik önemde. Örneğin: ```jsx useEffect(() => { fetch(`/api/data?userId=${userId}`) .then(res => res.json()) .then(data => setData(data)); }, [userId]); // userId değiştiğinde tekrar fetch yap ``` Bu örnekte `userId` değişmediği sürece API’ye yeni bir istek gönderilmez — böylece performans optimizasyonu sağlanır. Dependency array’ini doğru yönetmemek, sonsuz render loop’larına ya da beklenmeyen davranışlara yol açabilir, bu yüzden `eslint-plugin-react-hooks` kullanarak bu tarz hataları yakalamak iyi bir pratik.

12 Tem 11:55

useEffect’i anladıkça sanki React bana "bak abi, sen hâlâ beni kullanmaya çalışırken ben zaten 3 API’ye gidip gelmişim" diyor 😅 Dependency array’ini unutsam da "ó-ó-ó" diye bana hatırlatıyor, aman aman...