Props হল এমন ইনপুট যা প্যারেন্ট কম্পোনেন্ট দ্বারা একটি কম্পোনেন্টে পাঠানো হয় (চাইল্ড এর দৃষ্টিভঙ্গি থেকে শুধুমাত্র পড়া যায়)। State হল এমন ডেটা যা একটি কম্পোনেন্ট নিজে মালিক এবং অভ্যন্তরীণভাবে পরিচালনা করে (এটি এটি পরিবর্তন করতে পারে)। পার্থক্য: props বাইরে থেকে আসে এবং কম্পোনেন্টের মধ্যে পরিবর্তিত হয় না; state অভ্যন্তরীণ এবং পরিবর্তনশীল।
() {
;
}
< name= />
Props নিচে প্যারেন্ট থেকে চাইল্ডে প্রবাহিত হয়। চাইল্ড সেগুলি পড়ে কিন্তু সেগুলি পরিবর্তন করতে পারে না — একটি prop এর মান পরিবর্তন করতে, প্যারেন্টকে অবশ্যই একটি নতুন পাঠাতে হবে।
function Counter() {
const [count, setCount] = useState(0); // `count` is this component's own state
return <button onClick={() => setCount(count + 1)}>{count}</button>;
// the component updates its OWN state via setCount
}
State কম্পোনেন্টের ভিতরে তৈরি এবং নিয়ন্ত্রিত হয়; কম্পোনেন্ট এটি পরিবর্তন করে (setCount/setState এর মাধ্যমে), এবং এটি পরিবর্তন করা একটি পুনরায় রেন্ডার ট্রিগার করে।
Props State
Source passed from parent created in the component
Mutable? read-only (in child) yes (via setter)
Who controls it the parent the component itself
Triggers render when the parent changes it when the component updates it
Purpose configure/pass data in track changing internal data
function Parent() {
const [user, setUser] = useState({ name: "Ann" }); // STATE in the parent
return <Child name={user.name} />; // passed DOWN as a PROP
}
এক কম্পোনেন্টের state প্রায়শই একটি চাইল্ডে prop হিসাবে পাঠানো হয়। State উঠানো এবং নিচে পাঠানো ঠিক এই প্যাটার্ন — প্যারেন্ট state নিয়ন্ত্রণ করে, চাইল্ডরা এটি props হিসাবে পায়।
State বনাম props পার্থক্য কম্পোনেন্ট-ভিত্তিক ফ্রেমওয়ার্কের জন্য মৌলিক।
এটি ডেটা মালিকানা এবং প্রবাহ সংজ্ঞায়িত করে: props হল বাহ্যিক, শুধুমাত্র পড়া কনফিগারেশন (ডেটা নিচে); state হল অভ্যন্তরীণ, পরিবর্তনশীল ডেটা যা কম্পোনেন্ট পরিচালনা করে।
তাদের মধ্যে মিশ্রণ — props পরিবর্তন করা, বা props কে state তে নকল করা — ক্লাসিক বাগ সৃষ্টি করে।
বোঝা যে ডেটা props হিসাবে নিচে প্রবাহিত হয় যখন প্রতিটি কম্পোনেন্ট নিজের state নিয়ন্ত্রণ করে তা হল React/Vue/Angular কম্পোনেন্ট ডিজাইনের ভিত্তি।