Performance یک برنامه ری‌اکتی

بهینه‌سازی Performance در یک برنامه React اهمیت زیادی دارد، مخصوصاً در برنامه‌های بزرگ و پیچیده. در ادامه، برخی از تکنیک‌های مؤثر برای بهبود کارایی را توضیح می‌دهم:

---

1. Code Splitting (تقسیم کد)

چیست؟

React به‌طور پیش‌فرض، تمام کدها را در یک bundle کامپایل می‌کند، که ممکن است حجم فایل را زیاد کند.

Code Splitting باعث می‌شود که فقط بخش‌های موردنیاز لود شوند، نه کل برنامه.

چگونه استفاده کنیم؟

از ویژگی lazy loading در React همراه با React.lazy و Suspense استفاده کنید:

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

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

function App() {

  return (

    <Suspense fallback={<div>Loading...</div>}>

      <HeavyComponent />

    </Suspense>

  );

}

export default App;

برای Route-based Code Splitting می‌توانید React.lazy را با React Router ترکیب کنید:

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

import { Suspense, lazy } from 'react';

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

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

function App() {

  return (

    <Router>

      <Suspense fallback={<div>Loading...</div>}>

        <Routes>

          <Route path="/" element={<Home />} />

          <Route path="/about" element={<About />} />

        </Routes>

      </Suspense>

    </Router>

  );

}

export default App;

---

2. Lazy Loading (بارگذاری تنبل)

چیست؟

به تأخیر انداختن بارگذاری برخی از اجزا یا تصاویر تا زمانی که لازم باشند.

کمک می‌کند که برنامه سریع‌تر بارگذاری شود.

چگونه استفاده کنیم؟

Lazy Load تصاویر با loading="lazy":

<img src="large-image.jpg" alt="Example" loading="lazy" />

Lazy Load کامپوننت‌ها (مثل مثال React.lazy بالا)

Lazy Load داده‌ها:

از useEffect و fetch به‌صورت تنبل استفاده کنید:

import { useState, useEffect } from 'react';

function DataComponent() {

  const [data, setData] = useState(null);

  useEffect(() => {

    const fetchData = async () => {

      const response = await fetch('https://api.example.com/data');

      const result = await response.json();

      setData(result);

    };

    fetchData();

  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;

}

---

3. Memoization (بهینه‌سازی محاسبات با حافظه‌گذاری)

چیست؟

جلوگیری از اجرای غیرضروری توابع و رندر مجدد کامپوننت‌ها.

React.memo، useMemo و useCallback از ابزارهای Memoization در React هستند.

چگونه استفاده کنیم؟

React.memo: از رندر مجدد کامپوننت جلوگیری می‌کند مگر اینکه props تغییر کند:

import React from 'react';

const ExpensiveComponent = React.memo(({ value }) => {

  console.log('Rendered!');

  return <div>Value: {value}</div>;

});

function App() {

  const [count, setCount] = React.useState(0);

  return (

    <div>

      <button onClick={() => setCount(count + 1)}>Increment</button>

      <ExpensiveComponent value={count} />

    </div>

  );

}

useMemo: برای جلوگیری از محاسبات غیرضروری:

import { useMemo, useState } from 'react';

function ExpensiveCalculation(num) {

  console.log('Calculating...');

  return num * 2;

}

function App() {

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

  const result = useMemo(() => ExpensiveCalculation(count), [count]);

  return (

    <div>

      <button onClick={() => setCount(count + 1)}>Increment</button>

      <p>Result: {result}</p>

    </div>

  );

}

useCallback: جلوگیری از ایجاد مجدد توابع در هر رندر:

import { useCallback, useState } from 'react';

function Button({ onClick }) {

  console.log('Button rendered!');

  return <button onClick={onClick}>Click me</button>;

}

const MemoizedButton = React.memo(Button);

function App() {

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

  const handleClick = useCallback(() => {

    console.log('Button clicked');

  }, []);

  return (

    <div>

      <button onClick={() => setCount(count + 1)}>Increment</button>

      <MemoizedButton onClick={handleClick} />

    </div>

  );

}

---

4. Virtualization (مجازی‌سازی لیست‌ها)

چیست؟

وقتی لیست‌های بزرگی دارید (مثلاً ۱۰۰۰+ آیتم)، رندر کردن همه‌ی آن‌ها می‌تواند کند باشد.

Virtualization باعث می‌شود فقط آیتم‌های قابل مشاهده روی صفحه رندر شوند.

چگونه استفاده کنیم؟

با استفاده از react-window یا react-virtualized:

npm install react-window

import { FixedSizeList } from 'react-window';

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

  <div style={style}>Row {index}</div>

);

function App() {

  return (

    <FixedSizeList

      height={400}

      width={300}

      itemSize={50}

      itemCount={1000}

    >

      {Row}

    </FixedSizeList>

  );

}

export default App;

---

سایر تکنیک‌های بهینه‌سازی

✅ استفاده از Production Build:

با اجرای:

npm run build

فایل‌های بهینه‌شده تولید می‌شوند.

✅ Debounce و Throttle برای رویدادهای ورودی:

برای کاهش تعداد پردازش‌های غیرضروری هنگام تایپ کردن یا اسکرول.

✅ پرهیز از استفاده‌ی غیرضروری از useState و useEffect

اگر می‌توان از متغیرهای معمولی استفاده کرد، نیازی به useState نیست.

✅ Optimized Images & Compression:

تصاویر را با WebP فشرده کنید.

از CDN برای بارگذاری منابع استفاده کنید.

✅ Server-Side Rendering (SSR) یا Static Generation (SSG) با Next.js

باعث افزایش سرعت بارگذاری اولیه‌ی صفحه می‌شود.

---

جمع‌بندی

Code Splitting و Lazy Loading باعث کاهش حجم اولیه‌ی برنامه می‌شوند.

Memoization با React.memo, useMemo, و useCallback از محاسبات و رندرهای غیرضروری جلوگیری می‌کند.

Virtualization برای مدیریت لیست‌های بزرگ کاربردی است.

سایر بهینه‌سازی‌ها مثل Debounce، SSR/SSG و فشرده‌سازی تصاویر نیز بسیار مفید هستند.

استفاده‌ی ترکیبی از این تکنیک‌ها می‌تواند Performance برنامه‌ی React شما را به‌شدت بهبود دهد.