Giriş: Performans Neden Önemli?

Modern web uygulamalarında performans, kullanıcı deneyimini doğrudan etkileyen kritik bir faktördür. React ve Next.js ile geliştirilen uygulamalarda doğru optimizasyon teknikleri kullanarak, hızlı ve verimli web uygulamaları oluşturabilirsiniz.

"1 saniye gecikme, sayfa görüntülenmelerinde %11, müşteri memnuniyetinde %16 ve dönüşüm oranlarında %7 azalmaya neden olur." - Amazon

1. React Performans Optimizasyonu

React.memo ile Gereksiz Render'ları Önleme

React.memo, bileşenlerinizi memoize ederek gereksiz yeniden render işlemlerini önler:

import React, { memo } from 'react';

const ExpensiveComponent = memo(({ data, onUpdate }) => {
  console.log('Component rendered');
  
  return (
    

      
{data.title}
      
{data.description}
      Update
    
  );
});

// Shallow comparison için custom comparison function
const areEqual = (prevProps, nextProps) => {
  return prevProps.data.id === nextProps.data.id &&
         prevProps.data.title === nextProps.data.title;
};

export default memo(ExpensiveComponent, areEqual);

useMemo ve useCallback Hook'ları

Pahalı hesaplamaları ve fonksiyonları memoize edin:

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

const DataProcessor = ({ items }) => {
  const [filter, setFilter] = useState('');
  
  // Pahalı hesaplamayı memoize et
  const processedData = useMemo(() => {
    return items
      .filter(item => item.name.includes(filter))
      .sort((a, b) => a.priority - b.priority)
      .map(item => ({
        ...item,
        processed: true,
        timestamp: Date.now()
      }));
  }, [items, filter]);
  
  // Callback fonksiyonunu memoize et
  const handleFilterChange = useCallback((event) => {
    setFilter(event.target.value);
  }, []);
  
  return (
    

      
      {processedData.map(item => (
        
{item.name}
      ))}
    
  );
};

Virtual Scrolling

Büyük listeler için virtual scrolling kullanın:

import { FixedSizeList as List } from 'react-window';

const VirtualizedList = ({ items }) => {
  const Row = ({ index, style }) => (
    

      

        {items[index].name}
      
    
  );
  
  return (
    
      {Row}
    
  );
};

2. Next.js Optimizasyonları

Image Optimization

Next.js Image bileşeni ile otomatik görsel optimizasyonu:

import Image from 'next/image';

const OptimizedImageComponent = () => {
  return (
    

      
      
      {/* Responsive images */}
      
    
  );
};

Code Splitting ve Dynamic Imports

Kod bölümleme ile bundle boyutunu küçültün:

import dynamic from 'next/dynamic';
import { Suspense } from 'react';

// Component-level code splitting
const DynamicChart = dynamic(() => import('../components/Chart'), {
  loading: () => 
Loading chart...
,
  ssr: false // Client-side only rendering
});

// Conditional loading
const DynamicModal = dynamic(() => import('../components/Modal'));

const HomePage = () => {
  const [showModal, setShowModal] = useState(false);
  
  return (
    

      
Home Page
      
      
      {showModal && (
        Loading modal...
}>
           setShowModal(false)} />
        
      )}