🚀 React Native এ App Performance Optimization

React Native অ্যাপ যদি দ্রুত, স্মুথ এবং লো-ল্যাটেন্সি না হয়, তাহলে ব্যবহারকারী কখনও ভালো অভিজ্ঞতা পাবে না। তাই পারফরম্যান্স অপটিমাইজেশন হচ্ছে একটি প্রফেশনাল React Native ডেভেলপারের জন্য সবচেয়ে গুরুত্বপূর্ণ স্কিল।

📌 ১. Re-render কমানো (Avoid Unnecessary Rendering)

React Native-এ অতিরিক্ত re-render অ্যাপকে স্লো করে। তাই re-render কমানো পারফরম্যান্সের মূল কাজ।

✔ Memoization ব্যবহার করুন

React.memo() – component re-render বন্ধ করে
useCallback() – function re-render বন্ধ করে
useMemo() – heavy calculation cache করে

const ExpensiveComponent = React.memo(({ value }) => {
  return {value};
});

📌 ২. FlatList Optimization (List Rendering Speed বাড়ানো)

FlatList কে optimize করা খুব জরুরি কারণ সাধারণত app এর সবচেয়ে ভারী UI list এ থাকে।

✔ FlatList Optimization Tips

keyExtractor অবশ্যই ব্যবহার করুন
initialNumToRender কম রাখুন
windowSize বাড়ান
getItemLayout ব্যবহার করুন (height fix হলে)
renderItem কে useCallback দিয়ে wrap করুন

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  initialNumToRender={5}
  windowSize={10}
/>

📌 ৩. Large Images Optimization

বড় ইমেজ অ্যাপকে অত্যন্ত স্লো করে। তাই ইমেজ অপটিমাইজেশন খুবই জরুরি।

ইমেজ width/height ঠিক করে দিন
WebP format ব্যবহার করুন (small size)
react-native-fast-image ব্যবহার করুন

import FastImage from 'react-native-fast-image';

<FastImage
  style={{ width: 100, height: 100 }}
  source={{ uri: imageUrl }}
/>
</FastImage>

📌 ৪. Reduce App Size (APK/IPA Size Optimization)

Unused assets delete করুন
Proguard enable করুন (Android)
Hermes Engine enable করুন (React Native 0.70+)
Image compression ব্যবহার করুন

// android/app/build.gradle
project.ext.react = [
  enableHermes: true
]

📌 ৫. Avoid Heavy Work on JS Thread

JS Thread ব্লক হলে অ্যাপের UI freeze হয়।

✔ Heavy কাজগুলো Background Thread এ পাঠান:

react-native-reanimated
react-native-gesture-handler
InteractionManager

InteractionManager.runAfterInteractions(() => {
  // Heavy task
});

📌 ৬. Minimize Re-renders with Virtualization

Scrollable content manual map না করে VirtualizedList বা FlatList ব্যবহার করুন।

FlatList
SectionList
VirtualizedList

📌 ৭. Use PureComponent & ShouldComponentUpdate (Class Components)

ক্লাস কম্পোনেন্ট হলে PureComponent re-render কমায়।

class Example extends React.PureComponent {
  render() {
    return Hello;
  }
}

📌 ৮. Animations: Use Reanimated Instead of JS Animations

Reanimated 2 অ্যাপে UI-thread এ animation চালায় → smoother animation।

UI-thread animations
Smoother gestures
Zero JS blocking

📌 ৯. Production Build Optimization

Debug build সবসময় slow হয়। তাই testing করুন:

Android → release APK
iOS → TestFlight / Archive Build

✨ Summary (Important Points)

Memoization ব্যবহার করুন
FlatList Optimize করুন
FastImage ব্যবহার করুন
Heavy কাজ Background Thread এ পাঠান
Hermes Engine enable করুন
UI-thread animations ব্যবহার করুন (Reanimated)
Release build দিয়ে টেস্ট করুন

✔ এই অপটিমাইজেশনগুলো ফলো করলে আপনার React Native অ্যাপ হবে আরও দ্রুত, হালকা ও স্মুথ।

App Performance Optimization