🚀 React Native (File-based) Performance Optimization - TypeScript

React Native অ্যাপে performance optimization গুরুত্বপূর্ণ, বিশেষত যখন আমরা ফাইল বেসড অ্যাপ তৈরি করি TypeScript ব্যবহার করে। এই টপিকের মাধ্যমে আমরা শিখব কিভাবে আমাদের অ্যাপকে দ্রুত, স্মুথ এবং responsive বানানো যায়।

📌 ১. Re-render কমানো

অতিরিক্ত re-render অ্যাপকে স্লো করে। File-based structure হলে বিভিন্ন component আলাদা ফাইলের মধ্যে থাকে। তাই প্রতিটি component কে optimize করা খুব জরুরি।

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

import React, { memo } from 'react';
import { Text } from 'react-native';

interface Props {
  value: string;
}

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

export default ExpensiveComponent;

📌 ২. FlatList Optimization

বড় লিস্ট render করার সময় FlatList ব্যবহার করুন। keyExtractor এবং getItemLayout দিয়ে rendering দ্রুত হয়।

import React, { useCallback } from 'react';
import { FlatList, Text } from 'react-native';

const data = Array.from({ length: 1000 }, (_, i) => ({ id: i.toString(), name: `Item ${i}` }));

const MyList = () => {
  const renderItem = useCallback(({ item }) => {item.name}, []);

  return (
     item.id}
      initialNumToRender={10}
      windowSize={10}
    />
  );
};

export default MyList;

📌 ৩. Large Image Optimization

বড় ইমেজ অ্যাপকে স্লো করে। তাই FastImage বা WebP format ব্যবহার করুন।

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

const MyImage = () => {
  return (
    
  );
};

export default MyImage;

📌 ৪. Heavy Work Background এ পাঠানো

JS Thread block হলে UI freeze হয়। InteractionManager ব্যবহার করে heavy task background এ পাঠানো যায়।

import React, { useEffect } from 'react';
import { InteractionManager, Text } from 'react-native';

const HeavyTask = () => {
  useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      // Heavy computation
      console.log("Heavy task done!");
    });
  }, []);

  return Processing...;
};

export default HeavyTask;

📌 ৫. File-based Component Structure Benefits

ফাইল বেসড structure এ প্রতিটি component আলাদা ফাইলে থাকায়:

• Lazy loading সহজ হয়
• Code splitting সহজ হয়
• Reusable Components সহজে maintain করা যায়
• Debugging এবং optimization সহজ হয়

✨ Summary

• React.memo, useCallback, useMemo ব্যবহার করুন
• FlatList এবং SectionList optimize করুন
• FastImage এবং WebP ব্যবহার করুন
• Heavy task background এ পাঠান
• File-based structure maintain করুন
• Lazy loading এবং code splitting ব্যবহার করুন

✔ এই টিপসগুলো ব্যবহার করলে আপনার React Native (TypeScript) অ্যাপ হবে আরও দ্রুত, স্মুথ এবং responsive।