📘 React Native Props ও useState Hook (TypeScript সহ)

React Native অ্যাপে Props এবং useState Hook হলো সবচেয়ে গুরুত্বপূর্ণ দুটি কনসেপ্ট। এই দুটি বুঝতে পারলে আপনি সহজেই Dynamic ও Interactive Mobile App তৈরি করতে পারবেন।

🔹 React Native Props কী?

Props (Properties) ব্যবহার করে আমরা একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা পাঠাই। Props হলো Read-only, অর্থাৎ এটি পরিবর্তন করা যায় না।

📌 Props এর বৈশিষ্ট্য:

Parent থেকে Child এ ডেটা পাঠায়
Immutable (পরিবর্তন করা যায় না)
Reusable Component তৈরিতে সাহায্য করে

🧩 Props Example (TypeScript সহ)

type UserProps = {
  name: string;
};

const User = ({ name }: UserProps) => {
  return (
    <Text>👋 Hello, {name}</Text>
  );
};

export default User;

📌 Parent Component:

import User from './User';

const App = () => {
  return (
    <User name="Prabir" />
  );
};

export default App;

📤 Output:

👋 Hello, Prabir

🔹 useState Hook কী?

useState হলো একটি React Hook যা আমাদের কম্পোনেন্টে State (ডাইনামিক ডেটা) ব্যবহারের সুযোগ দেয়।

📌 useState কেন ব্যবহার করবো?

User Interaction handle করতে
Button click, Input change ইত্যাদি
UI dynamically update করার জন্য

⚙️ useState Example (Counter App – TypeScript)

import { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Button 
        title="Increase"
        onPress={() => setCount(count + 1)}
      />
    </View>
  );
};

export default Counter;

📤 Output Behavior:

Initial Count দেখাবে: 0
Button ক্লিক করলে Count বাড়বে
UI সাথে সাথে Update হবে

🔗 Props + useState একসাথে ব্যবহার

বাস্তব অ্যাপে আমরা প্রায়ই Parent Component এ state রাখি এবং Child Component এ props হিসেবে পাঠাই।

type ButtonProps = {
  onPress: () => void;
};

const CustomButton = ({ onPress }: ButtonProps) => (
  <Button title="Click Me" onPress={onPress} />
);

const App = () => {
  const [clicked, setClicked] = useState<boolean>(false);

  return (
    <View>
      <CustomButton onPress={() => setClicked(true)} />
      {clicked && <Text>✅ Button Clicked</Text>}
    </View>
  );
};

📤 Output:

Button ক্লিক করলে → ✅ Button Clicked দেখাবে

✨ সংক্ষেপে (Summary)

Props → Parent থেকে Child এ ডেটা পাঠাতে
useState → Component এর ডাইনামিক ডেটা ম্যানেজ করতে
TypeScript → Code কে আরও Safe ও Professional করে
এই দুটি কনসেপ্ট React Native শেখার ভিত্তি

🎯 Props ও useState ভালোভাবে শিখলে React Native শেখা অনেক সহজ হয়ে যাবে

Props ও useState Hook