Performance Optimization

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

React.memo(Component) က props မပြောင်းရင် component ကို re-render မလုပ်ဘဲ ကျော်ပေးပါတယ် — parent re-render ဖြစ်တိုင်း child component အားလုံး automatically re-render ဖြစ်တတ်တာကို ကာကွယ်ပေးပါတယ်။ useMemo(calculation, deps) က expensive calculation ရလဒ်ကို cache ထားပြီး, dependency မပြောင်းရင် ထပ်မတွက်ဘဲ cached value ပြန်ပေးပါတယ်။ useCallback(function, deps) က function reference ကို stable ထားပေးပါတယ် — function ကို prop အနေနဲ့ React.memo child ဆီ pass ချင်ရင် အသုံးဝင်ပါတယ် (function reference မတည်ငြိမ်ရင် React.memo က အလုပ်မဖြစ်တော့ပါ)။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

FlatList ရဲ့ renderItem function ကို component render တိုင်း inline function အသစ် ({item} => ...) ဖန်တီးနေရင် React.memo ကို child item component မှာ သုံးထားတောင် အလုပ်မဖြစ်ပါဘူး — useCallback ဖြင့် renderItem function ကို stable ထားရမှာပါ။ Optimization ကို premature မလုပ်ပါနှင့် — 'app hesitant ဖြစ်နေတယ်' ဆိုတဲ့ actual problem ရှိမှ profile ပြီး targeted optimization လုပ်ပါ။

• React.memo = props မပြောင်းရင် re-render skip
• useMemo = expensive calculation cache
• useCallback = function reference stable ထားခြင်း (React.memo child အတွက် လိုအပ်)

Code နမူနာ

import { memo, useCallback, useMemo } from 'react';

const ProductCard = memo(function ProductCard({ product, onPress }) {
  console.log('Rendering:', product.name); // memo ရှိရင် unnecessary re-render တွေ မဖြစ်
  return <Text onPress={() => onPress(product.id)}>{product.name}</Text>;
});

function ProductList({ products }) {
  // Stable function reference — ProductCard memo ကို အလုပ်ဖြစ်စေဖို့
  const handlePress = useCallback((id) => {
    console.log('Pressed:', id);
  }, []);

  const sortedProducts = useMemo(
    () => [...products].sort((a, b) => a.price - b.price),
    [products],
  );

  return sortedProducts.map((p) => (
    <ProductCard key={p.id} product={p} onPress={handlePress} />
  ));
}

Console log ကနေ ProductCard component က products data ပြောင်းမှသာ re-render ဖြစ်တာ ('Rendering: ...' log နည်းလာတာ) တွေ့ရမည်။