React Native-এ props এবং state কীভাবে কাজ করে?

Question

Accepted Answer

**Props** এবং **state** হল মূল React ধারণা যা React Native-এ অভিন্নভাবে কাজ করে: **props** একটি component-এ ডেটা পাস করে (read-only input), যখন **state** এমন ডেটা রাখে যা সময়ের সাথে পরিবর্তিত হতে পারে (re-render ট্রিগার করে)। এগুলি বোঝা মৌলিক। ## Props — পাস করা ডেটা (read-only) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — পরিবর্তনশীল ডেটা (useState এর মাধ্যমে) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State হল অভ্যন্তরীণ, পরিবর্তনশীল ডেটা; এটি আপডেট করা (useState থেকে setter এর মাধ্যমে) একটি re-render ট্রিগার করে — যেভাবে UI পরিবর্তনগুলি প্রতিফলিত করে। ## Props বনাম state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## এটি কেন গুরুত্বপূর্ণ Props এবং state বোঝা React Native-এর জন্য মৌলিক কারণ তারা **মূল React ধারণা যা components কীভাবে কাজ করে এবং UIs কীভাবে আপডেট হয় তার কেন্দ্রবিন্দু**, তাই এটি অবশ্যই জানার জ্ঞান। **Props** (একটি component-এ তার parent থেকে পাস করা read-only ডেটা, component tree নিচের দিকে প্রবাহিত) হল উপায় যেভাবে components বাইরের থেকে configuration এবং ডেটা পায়, পুনরায় ব্যবহারযোগ্য, সংমিশ্রণযোগ্য components সক্ষম করে। **State** (অভ্যন্তরীণ, পরিবর্তনশীল ডেটা `useState` হুক এর মাধ্যমে পরিচালিত, যেখানে এটি আপডেট করা একটি re-render ট্রিগার করে) হল যেভাবে components সময়ের সাথে পরিবর্তিত হয় এমন ডেটা রাখে এবং প্রতিক্রিয়া দেখায় (user input, toggles, fetched ডেটা) — সেই প্রক্রিয়া যার মাধ্যমে UIs পরিবর্তনগুলি প্রতিফলিত করে। **পার্থক্য** বোঝা — props পাস করা এবং read-only (বাহ্যিক ডেটা/configuration এর জন্য) বনাম state অভ্যন্তরীণ এবং পরিবর্তনশীল (পরিবর্তনশীল ডেটার জন্য, re-render চালিত করে) — এবং নীতি যে **ডেটা props এর মাধ্যমে নিচে প্রবাহিত হয় যখন state পরিবর্তনগুলি UI আপডেট চালিত করে** সঠিকভাবে React Native (এবং React) apps তৈরি করার জন্য মৌলিক। এগুলি ঠিক একই ধারণা যেমন web এর জন্য React, তাই এগুলি বোঝা সরাসরি হস্তান্তর করে এবং React Native components তৈরিকারী যে কাউকে জন্য অপরিহার্য। Props এবং state সঠিক করা (props এর মাধ্যমে ডেটা পাস করা, state এর সাথে পরিবর্তনশীল ডেটা পরিচালনা করা, unidirectional ডেটা প্রবাহ বোঝা) কার্যকরী, সঠিক components এর জন্য মূল। যেহেতু props এবং state React Native (এবং React) components কীভাবে কাজ করে তার কেন্দ্রবিন্দু — ডেটা গ্রহণ করা (props) এবং পরিবর্তন পরিচালনা করা (state) UI আপডেট চালিত করতে — এবং এগুলি বোঝা যে কোনো React Native app সঠিকভাবে তৈরি করার জন্য মৌলিক, props এবং state বোঝা অপরিহার্য, ভিত্তিমূলক React Native জ্ঞান — মূল ধারণা যা প্রতিটি React Native developer-কে অবশ্যই বুঝতে হবে, web React এর সাথে অভিন্ন (তাই জ্ঞান হস্তান্তর করে), এবং এমন components তৈরি করার জন্য মৌলিক যা ডেটা গ্রহণ করে এবং পরিবর্তনে প্রতিক্রিয়া দেয়, React Native UI development এর মৌলিক যান্ত্রিকতা।