Burak Behlül

Mala Anlatır Gibi React — 10: Yeni Özellikler ve Hooklar / React 19 React 19 çıkmasıyla beraber, yeni özellikler ve hook lar geldi. Artık head etiketleri ni kullanabileceğiz. Yani direkt component’a <title> Burak Behlül </title> diye yazıp, kullanacağız. Bunun harici nextjs kullananlar bilir, artık ‘ use client ’, ‘ use server ’ özelliği de React’da geldi. React’da memoization ’ı elle yapmaya son. Bu durumda, useMemo() , useCallback() , memo() gibi hookları kullanmayacağız. React kendisi yönetecek. (Görsel, I.) Bunun yanında Promise ’ı çözen ve bir hook getirmişler. Kullanımı şöyle: import { use, Suspense } from 'react' use ( ()=> {}) use ( ()=> fetch ( URL ). then (). catch ()) Yanıtı beklemek <Suspense>: < Suspense fallback= "Yükleniyor..." > // code </ Suspense > Ayrıca, use() hook’u, useContext yerine geçiyor, bakalım: useContext (themeContext) use (themeContext) Provider kalkıyor: < ThemeContext . Provider valu...

Mala Anlatır Gibi React — 3: React.memo, useMemo, useCallback React (Resim, 1.) useMemo , hesaplama açısından maliyetli işlemleri tekrarlamadan kaçınmak için kullanılır. Bir değer veya hesaplama işlemi, bağımlılık olarak belirlenen değişkenler değişmediği sürece önbelleğe alınır. Bu sayede, gereksiz yere tekrar hesaplama yapılmaz ve bileşenin performansı artar. Nasıl çalışır? import React , { useMemo } from 'react' ; function Ornek ( { num } ) { const expensiveComputation = useMemo ( () => { console . log ( "Başlıyor..." ); return num * 2 ; }, [num]); return < div > {expensiveComputation} </ div > ; } useCallback , bir fonksiyonu bağımlılıklarına göre önbelleğe almak için kullanılır. Bu sayede, fonksiyon her render'da yeniden oluşturulmaz. Özellikle, alt bileşenlere prop olarak fonksiyon geçerken faydalıdır, çünkü her render'da yeni bir fonksiyon oluşturulursa, alt bileşenler tekrar render olabilir. Nasıl çalışır? import Re...