Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının React'teki useMemo hook'unu anlattığı eğitim içeriğidir. Konuşmacı, React'in kendi dokümantasyonundan ve bir front-end yazılımcının makalesinden yola çıkarak konuyu açıklamaktadır.
- Video, useMemo hook'unun ne olduğunu, nasıl kullanıldığını ve performans optimizasyonu için nasıl faydalı olduğunu detaylı şekilde anlatmaktadır. İlk bölümde teorik bilgiler verilirken, ikinci bölümde bir uygulama örneği üzerinden useMemo'nun pratik kullanımını göstermektedir. Özellikle pahalı hesaplamaları hatırlamak için kullanılan useMemo'nun, render aşamasında nasıl çalıştığı ve dependency array'in işlevi açıklanmaktadır.
- Videoda ayrıca useMemo'nun useCallback'ten farkı, sadece performans artırımı için kullanılabileceği ve her zaman avantajlı olmayabileceği vurgulanmaktadır. Her input değişikliğinde filtreleme işleminin sürekli yeniden hesaplandığı bir örnek üzerinden, useMemo'nun sadece search state değiştiğinde filtreleme işlemini yeniden çalıştırmasını nasıl sağladığı adım adım gösterilmektedir.
- 00:01React'te useMemo Hook'u
- Videoda React serisinde son video olarak useMemo hook'u anlatılacak.
- Konuşmacı, React'ın kendi dokümantasyonundaki listede useMemo hook'unu bahsedeceğini belirtiyor.
- Konuşmacı, useMemo hook'unu anlatmak için bir yazılımcının makalesinden yola çıkacağını söylüyor.
- 01:36useMemo Hook'unun Tanımı ve Kullanımı
- useMemo, compute expensive (pahalı) fonksiyonlarını hatırlamak için kullanılır.
- useMemo ile memorize (hatırlama) işlemi yapılır, yani ilk seferde işlem normal şekilde yapılır ve sonucu hatırlar, ikinci sefer aynı işlemi tekrar yapmaz.
- Pahalı bir işlem, birkaç saniye süren veya kullanıcıyı engelleyen bir işlemdir.
- 03:59Dependency Array ve Kullanım Alanları
- useMemo kullanırken dependency array kısmı vardır ve dışarıdan gelen değerler bu dizide belirtilir.
- Dependency array'teki değerler değişirse işlem tekrar yapılır, aynı kalırsa hafızadaki değer kullanılır.
- useMemo genellikle render işlemi sık olan ekranlarda kullanılır, örneğin form component'lerinde.
- 05:52useMemo'un Çalışma Prensibi
- useMemo'ya girdiğiniz fonksiyon sadece render aşamasında çalışır, React tüm değerler için bu fonksiyonu çalıştırıp kaydetmez.
- Eğer dependency array verilmezse her renderda değer yeniden hesaplanır, bu durumda useMemo kullanmakla kullanmamak arasında fark olmaz.
- Boş bir dependency array verilirse, değer sadece bir kere hesaplanır.
- 07:06useMemo Kullanımında Dikkat Edilmesi Gerekenler
- useMemo performans optimizasyonu olarak kullanılabilir, ancak semantic garanti olarak değil.
- React, daha önce kaydettiği değerleri unutabilir veya hafızadan çıkarıp yeniden hesaplayabilir.
- Kodunuz useMemo olmadan çalışacak şekilde yazılmalı, useMemo sadece performans artırımı için kullanılsın.
- 08:51Örnek Uygulama
- Bir örnek uygulamada isimler listesi ve arama özelliği bulunmaktadır.
- Kullanıcı input kısmına yazdığında her tuşa basıldığında state değişir ve component yeniden render edilir.
- Filter user değeri sadece search değiştiğinde değişmesi gereken bir değerdir, bu nedenle her renderda hesaplanmasının anlamı yoktur.
- 12:00React Uygulamasında Performans Sorunu
- Uygulama ilk gününde "filter functions running" konsol çıktısı veriyor ve her tuşa basıldığında konsolda 11 adet daha item görünüyor.
- Uygulamanın tasarımı, arama işlemini sadece "search" butonuna basıldığında yapmak için tasarlanmış.
- React'te bileşen gövdesinde oluşturulan değerler, useMemo veya useReducer gibi hafızaya almadan bırakılırsa, her renderda yeniden hesaplanıyor.
- 13:30useMemo Kullanımı
- Filter işlemini sadece search değiştiğinde hesaplanmasını sağlamak için useMemo kullanılıyor.
- useMemo, fonksiyonun döndürdüğü değeri hafızada tutuyor ve dependent array ile sadece search state değiştiğinde fonksiyonu yeniden çalıştırıyor.
- Bu değişiklikten sonra, search butonuna basılmadığında konsolda hiçbir değişiklik olmuyor, sadece search state değiştiğinde useMemo içindeki fonksiyon yeniden çalışıp filtre işlemi hesaplanıyor.
- 15:38Performans Optimizasyonu Hakkında Uyarı
- useMemo'nun çoğu durumda çok performans sağlayamayacağı, hatta bazen her renderda yeniden filtre etmesinden daha pahalı olabileceği belirtiliyor.
- Uygulama yavaşlamaya başladığında veya göze görülür bir yavaşlık olduğunda performans optimizasyonu yapılmalı, aceleye gelmiş optimizasyonlardan kaçınılmalı.
- Önce uygulamanın çalışması sağlanmalı, performans sorunları belirgin hale geldiğinde onlara bakılmalı.