React.js İpuçları: 2. Bölüm – Temiz ve Güçlü Kod İçin Gelişmiş Teknikler

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

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

  const doubledCount = useMemo(() => {
    console.log('Expensive calculation!'); // Sadece gerekli olduğunda çalışır
    return count * 2;
  }, [count]);

  return (
    

      
Count: {count}
      
Doubled Count: {doubledCount}
       setCount(count + 1)}>Increment
    
  );
}

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function MyComponent() {
  return (
    Loading...

Bu, kullanıcının LazyComponent'ı kullanana kadar indirmeye başlamaz, bu sayede ilk yükleme süresini önemli ölçüde kısaltabilir. Daha fazla bilgi için (https://fatihsoysal.com) inceleyebilirsiniz.

React Context API'sini Etkin Şekilde Kullanma

React Context API, uygulamanız genelinde veriyi paylaşmak için güçlü bir yoldur. Ancak, yanlış kullanıldığında performans sorunlarına yol açabilir. Context'in sadece gerekli durumlarda kullanılması ve derinlemesine nesne yapılarının yerine küçük, gerekli dataların kullanılması önemlidir. Ayrıca, useMemo hook'u ile context değerlerini önbelleğe alarak gereksiz hesaplamaları azaltabilirsiniz.

Örneğin, büyük bir veri yapısını context ile paylaşmak yerine, yalnızca gerekli alt kümeleri paylaşarak performansı artırabilirsiniz. Bu, gereksiz renderları azaltır ve uygulamanın daha hızlı çalışmasını sağlar.

React'te Güvenli Kod Yazma

Dikkat: Kullanıcı girdilerini doğrulamamak, Cross-Site Scripting (XSS) gibi güvenlik açıklarına yol açabilir. Her zaman kullanıcı girdilerini doğrulayın ve sanitize edin. React'te güvenli kod yazmak için, sanitize kütüphaneleri kullanabilir veya kendi doğrulama fonksiyonlarınızı yazabilirsiniz.

Ayrıca, uygulamanızda kullanılan tüm kütüphanelerin güncel olduğundan emin olun. Eski sürümlerdeki güvenlik açıklarından korunmak için düzenli olarak güncellemeler yapın. Daha fazla güvenlik ipucu için (https://fatihsoysal.com) web sitemizi ziyaret edebilirsiniz.

Hook'lar ile Karmaşık Durum Yönetimi: Bir Vaka Çalışması

Bir e-ticaret uygulamasında, ürün listesinin ve sepetin durumunu yönetmek için custom hook’lar kullanabiliriz. Bu yaklaşım, kodun daha okunabilir ve sürdürülebilir olmasını sağlar. Aşağıdaki örnekte, ürün listesini ve sepeti yönetmek için useProductManager adında bir custom hook kullanılmıştır:

import { useState } from 'react';

const useProductManager = () => {
  const [products, setProducts] = useState([]);
  const [cart, setCart] = useState([]);

  const addToCart = (product) => {
    setCart([...cart, product]);
  };

  const removeFromCart = (product) => {
    setCart(cart.filter((item) => item.id !== product.id));
  };

  return { products, cart, addToCart, removeFromCart };
};

export default useProductManager;

Bu hook, ürün listesini ve sepeti yönetmek için gerekli fonksiyonları sağlar. Bu sayede, uygulamanın farklı bileşenlerinde aynı mantığı tekrar tekrar yazmak zorunda kalmayız. Bu durum, kodun temizliğini, okunabilirliğini ve sürdürülebilirliğini artırır.

Performans Karşılaştırması: Tablolar mı, Listeler mi?

Büyük miktarda veriyi görüntülerken, performans büyük önem taşır. Tablolar ve listeler arasında performans karşılaştırması yapıldığında, genellikle listeler daha verimlidir. Ancak, tablolar daha düzenli ve okunabilir bir görünüm sunar. Optimal yaklaşım, veri kümesinin büyüklüğüne ve uygulama gereksinimlerine bağlı olarak değişir. Küçük veri kümeleri için tablolar, büyük veri kümeleri için ise optimizasyonlu listeler tercih edilmelidir.

İleri Düzey React Teknikleri: Suspense ve Async/Await

Suspense ve Async/Await kombinasyonu, asenkron veri yüklemelerini daha iyi yönetmenizi sağlar. Suspense, veri yüklenirken bir yükleniyor göstergesi göstermenizi ve veri yüklendikten sonra bileşeni görüntülemenizi sağlar. Async/Await, asenkron kodları daha senkron gibi yazmanıza olanak tanır, bu da kodun okunabilirliğini artırır.

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent').then(module => ({ default: module.MyComponent })));

function App() {
    return (
        Yükleniyor...