React'ta useCallback ve useMemo Ne Zaman Gerekli?
Her fonksiyonu useCallback'e sarmak performansı artırmaz, düşürebilir. Profiler tabanlı bir yaklaşımla useMemo ve useCallback'i ne zaman kullanmanız gerektiğini öğrenin.
Yazı, React geliştiricilerinin sıkça düştüğü bir tuzağı ele alıyor: her fonksiyonu useCallback'e, her diziyi useMemo'ya sarmak. Yazarın React Profiler ile yaptığı ölçümler, aşırı memoizasyonun aslında render performansını kötüleştirdiğini gösteriyor — çünkü bağımlılık kontrolleri de bir maliyettir ve memoize edilmiş bir child component olmadan bu hooklar hiçbir işe yaramaz. 500 satırlık bir admin tablosunda her hücreyi memoize etmenin scroll performansını daha da kötüleştirdiği, gerçek çözümün ise listeyi sanallaştırmak (virtualization) olduğu somut bir örnekle anlatılıyor.
Teknik olarak useMemo bir değeri, useCallback ise bir fonksiyon referansını render'lar arası önbelleğe alır; ikisi de parent'ın yeniden render olmasını engellemez, sadece React.memo ile sarılmış bir child'ın gereksiz render'dan kaçınmasına yardımcı olabilir. Yazar, memoize edilmiş bir tüketici (consumer) olmadan eklenen useMemo/useCallback'in tamamen boşa harcanmış kod olduğunu vurguluyor ve bunu 'memo soup' olarak adlandırıyor.
Pratik kural net: varsayılan olarak hiç memo hook kullanma, Profiler bir sorun gösterdiğinde ekle. Pahalı hesaplamalar ve memoize edilmiş child'lara geçirilen stabil prop'lar için useMemo; yine memoize child'lara geçen stabil handler'lar için useCallback kullanılmalı. ESLint'in exhaustive-deps uyarısını susturmak için körlemesine memo eklemek, code review'larda en sık karşılaşılan ve silinen anti-pattern olarak gösteriliyor.