Chapter 25 — Performance Optimallashtirish

Optimizatsiyani sababsiz qo'llash — o'zi muammo. Avval o'lchang, keyin optimallashtiring.

---

25.1 React.memo

Example

App.jsx
React JSXNusxalash
01const ProductCard = React.memo(function ProductCard({ product }) {
02  console.log("ProductCard render bo'ldi");
03  return <div>{product.name}</div>;
04});

Simple Explanation

React.memo — komponentni "eslab qoladi": agar props oldingisi bilan bir xil bo'lsa, komponentni qayta render qilmaydi.

⚠️ Common Mistake
React.memoni har bir komponentga "ehtiyot shart" sifatida qo'llash — bu ba'zan solishtirish xarajati tufayli aksincha sekinlashtirishi mumkin.

25.2 useMemo

Example

App.jsx
React JSXNusxalash
01const expensiveResult = useMemo(() => {
02  return computeExpensiveValue(items);
03}, [items]);

Problem → Measure → Solution → Tradeoff

• Problem: Har render'da qimmat hisoblash qayta bajariladi
• Measure: Profiler orqali qaysi hisoblash sekinligini aniqlang
• Solution: useMemo bilan natijani "eslab qolish"
• Tradeoff: Qo'shimcha xotira va solishtirish xarajati

25.3 useCallback va Referential Equality

Example

App.jsx
React JSXNusxalash
01const handleClick = useCallback(() => {
02  doSomething(id);
03}, [id]);

Simple Explanation

Har render'da yangi funksiya obyekti yaratiladi (garchi mantiqan bir xil bo'lsa ham). useCallback — funksiyaning o'zini "eslab qoladi", faqat dependency o'zgarganda yangisini yaratadi.

25.4 Code Splitting va Lazy Loading

Example

App.jsx
React JSXNusxalash
01const AdminPanel = React.lazy(() => import("./AdminPanel"));
02 
03function App() {
04  return (
05    <Suspense fallback={<Spinner />}>
06      <AdminPanel />
07    </Suspense>
08  );
09}

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Katta ro'yxatni render qiluvchi komponentni React.memo bilan optimallashtiring va profiler orqali farqni kuzating.

🔴 Exercise 2 — Hard

Task: React.memolangan child komponentga callback prop uzatuvchi parent yarating, va useCallbacksiz/bilan farqni solishtiring.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Parent() {
02  const [count, setCount] = useState(0);
03  const handleClick = () => console.log("clicked");
04 
05  return (
06    <>
07      <button onClick={() => setCount(count + 1)}>{count}</button>
08      <MemoizedChild onClick={handleClick} />
09    </>
10  );
11}
12 
13const MemoizedChild = React.memo(function Child({ onClick }) {
14  console.log("Child render bo'ldi");
15  return <button onClick={onClick}>Child</button>;
16});

Your Task: count o'zgarganda, MemoizedChild nega baribir qayta render bo'ladi (garchi React.memo ishlatilgan bo'lsa ham)?

<details> <summary>Solution</summary> `handleClick` — har render'da yangi funksiya sifatida qayta yaratiladi. `React.memo` props'ni solishtirganda, `onClick`ning reference'i o'zgarganini ko'radi va shuning uchun `Child`ni qayta render qiladi. Yechim: ```jsx const handleClick = useCallback(() => console.log("clicked"), []); ``` </details>

📌 Chapter Summary

Optimallashtirish — birinchi navbatda o'lchash, keyin maqsadli yechim qo'llash kerak. React.memo, useMemo, useCallback — har biri o'ziga xos vaziyat uchun, lekin har birining o'z xarajati bor.

🎯 Key Takeaways

• Avval profiling, keyin optimallashtirish
• React.memo — props o'zgarmasa re-render'ni o'tkazib yuboradi
• useMemo — qimmat hisoblash natijasini eslab qoladi
• useCallback — funksiya reference'ini barqarorlashtiradi
• Code splitting — boshlang'ich yuklanishni tezlashtiradi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const Memoized = React.memo(Component);
02const value = useMemo(() => computeExpensive(a, b), [a, b]);
03const fn = useCallback(() => doSomething(id), [id]);
04const Lazy = React.lazy(() => import("./Component"));

---