17/04/2025
Real-world applications ကြီးလာတာနဲ့အမျှ JS bundle size ကြီးလာတတ်ပါတယ်။ ဒါကြောင့် page by page load (lazy loading) လုပ်ဖို့ React.lazy နဲ့ Suspense ကိုသုံးတာဟာ performance ကောင်းစေပါတယ်။
jsx
import React, { Suspense } from 'react';
const HomePage = React.lazy(() => import('./HomePage'));
function App() {
return (
);
}
ဒီနည်းကုိ အသံုးပြုချင်းအားဖြင့်initial load အချိန်ကိုလျှော့နိုင်ပြီး UX ကိုတိုးတက်စေနိုင်ပါတယ်
Tip 2: Debounce Input for Search Fields
ကျတော်တို့ရဲ့ Search bar လို input field တွေမှာ user input တိုင်းကို API call မလုပ်ဘဲ debounce လုပ်ပြီး optimize လုပ်ဖို့လိုပါတယ်။ `lodash.debounce` ကိုသုံးလို့ရပါတယ်။
jsx
import { useState, useEffect } from 'react';
import debounce from 'lodash.debounce';
function SearchBox() {
const [query, setQuery] = useState('');
const handleSearch = debounce((value) => {
console.log('Searching for:', value);
}, 500);
useEffect(() => {
if (query) handleSearch(query);
}, [query]);
return (
setQuery(e.target.value)}
/>
);
}
ဒီလိုလုပ်ခြင်းက performance ကိုကောင်းစေနိုင်ပြီး unnecessary API calls များစွာ မဖြစ်အောင်ကာကွယ်ေပးနိုင်ပါတယ်
https://t.me/career_hub0101
