ReactIntermediate

State Lifting ও Props শেয়ার

দুটি component-এর মধ্যে এক state ভাগ করা — lifting state up pattern — বাংলায়।

6টি অংশবাংলা ভাষায়

কেন lifting

প্রায়ই দুটি sibling component-এর একই ডেটা দরকার হয়। তখন state-টি উপরের parent-এ রাখা হয় এবং প্রয়োজন হলে child-এ props হিসেবে পাঠানো হয় — এই pattern-কে বলে lifting state up।

Lifting উদাহরণjsx

jsx

function App() {
  // state parent-এ
  const [query, setQuery] = useState("");

  return (
    <div>
      <SearchBox value={query} onSearch={setQuery} />
      <Results query={query} />
    </div>
  );
}

// parent → child (value)
// child → parent (onSearch callback)
function SearchBox({ value, onSearch }) {
  return (
    <input
      value={value}
      onChange={(e) => onSearch(e.target.value)}
      placeholder="সার্চ…"
    />
  );
}

function Results({ query }) {
  return <p>Searching for: {query}</p>;
}

Callback props নিয়ম

Child-কে value এবং event handler দুটোই দিতে হয়
Child নিজে state বানায় না — সব নিয়ন্ত্রণ উপরে
এভাবে সত্যের একটিমাত্র উৎস থাকে — single source of truth

Prop drilling

structure-এর অনেক গভীরে props পাঠাতে হলে (parent → child → grandchild) Context বা Reducer + Context combo ব্যবহার করুন — নইলে লেখা জটিল হয়ে যায়।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।