ReactAdvanced

Performance Optimization

React Compiler, Suspense, lazy loading, code splitting ও stale closure — বাংলায়।

8টি অংশবাংলা ভাষায়

React Compiler

React 19-এর React Compiler automatic memo-জাতীয় optimization প্রয়োগ করে — যাতে এড়িয়ে চলা যায় অপ্রয়োজনীয় re-render। বড় প্রজেক্টে migration-এর আগে ধাপে ধাপে validate করুন।

lazy + Suspense

Code splittingjsx

jsx

import { lazy, Suspense } from "react";

// শুধু প্রয়োজন হলে এই component-টি load হবে
const AdminPanel = lazy(() => import("./AdminPanel"));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <AdminPanel />
    </Suspense>
  );
}

মনে রাখা টিপস

list-এ stable unique key দিন — index নয়
গভীর ও ব্যয়বহুল re-render → React.memo/Compiler
useEffect-এ ভুল dependency → infinite loop, সাবধান
বড় bundle ও part lazy-load করুন — dynamic import
DevTools Profiler দিয়ে আসল সমস্যা খুঁজে নিন

Stale closure

পুরনো value আটকে যাওয়াjsx

jsx

// ভুল — পুরনো count ধরে রাখতে পারে
useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1); // প্রতিবার পুরনো count
  }, 1000);
}, []);

// ঠিক — functional update
useEffect(() => {
  const timer = setInterval(() => {
    setCount((prev) => prev + 1);
  }, 1000);
}, []);

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।