Performance Basics

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

React performance ဆိုတာ code ကိုစစချင်းကတည်းကရှုပ်အောင် optimize လုပ်တာမဟုတ်ပါ။ အရင်ဆုံး component structure သန့်အောင်ရေး၊ state ကိုလိုအပ်တဲ့နေရာမှာပဲထား၊ list key မှန်အောင်ထား၊ unnecessary render ဖြစ်နေတဲ့နေရာတွေကိုနောက်မှတိုင်းတာပြီး ပြင်တာကောင်းပါတယ်။

jsx

import { memo, useState } from 'react';

const LessonItem = memo(function LessonItem({ title }) {
  console.log('render lesson:', title);
  return <li>{title}</li>;
});

function App() {
  const [count, setCount] = useState(0);
  const lessons = ['JSX', 'Props', 'State'];

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
      <ul>
        {lessons.map(lesson => (
          <LessonItem key={lesson} title={lesson} />
        ))}
      </ul>
    </div>
  );
}

`memo` က props မပြောင်းတဲ့ child component ကို မလိုအပ်ဘဲ render ပြန်မလုပ်အောင်ကူညီနိုင်ပါတယ်။ ဒီ example မှာ `LessonItem` title မပြောင်းရင် render ကိုလျှော့နိုင်ပါတယ်။

You should see

Button count တိုးနိုင်ပြီး list items တွေကို memoized component အဖြစ်ပြထားပါတယ်။

Info

Performance optimization မလုပ်ခင် React DevTools Profiler နဲ့စစ်တာအကောင်းဆုံးပါ။ Guess နဲ့ optimize လုပ်ရင် code ထူပြီးအကျိုးမရှိတာများပါတယ်။