Context API কী এবং কেন প্রয়োজন?

Context API কী?

ReactJS-এ Context API হল একটি ফিচার যা React অ্যাপ্লিকেশনগুলিতে global state বা shared data সহজভাবে পরিচালনা করতে সহায়তা করে। এটি আপনাকে props drilling (একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে props পাস করা) থেকে মুক্তি দেয় এবং আপনাকে একটি কেন্দ্রীভূত অবস্থান থেকে ডেটা সরবরাহ করতে সহায়তা করে। Context API ব্যবহার করে, আপনি এক জায়গায় একটি state বা ডেটা সংরক্ষণ করতে পারেন এবং আপনার React অ্যাপ্লিকেশনের যেকোনো কম্পোনেন্টে সহজেই সেই ডেটা অ্যাক্সেস করতে পারেন।

React Context মূলত দুটি প্রধান অংশ নিয়ে কাজ করে: Provider এবং Consumer। Provider উপাদানটি ডেটা প্রদান করে, আর Consumer উপাদানটি সেই ডেটা ব্যবহার করে।

Context API-এর প্রয়োজনীয়তা

1. Props Drilling বন্ধ করা: যখন আপনার অ্যাপ্লিকেশনে অনেক স্তরের কম্পোনেন্ট থাকে এবং আপনি একটি কম্পোনেন্ট থেকে আরেকটি কম্পোনেন্টে props পাস করতে চান, তখন এটি props drilling নামে পরিচিত। এটি বড় অ্যাপ্লিকেশনগুলিতে খুব ক্লান্তিকর হতে পারে। Context API এই সমস্যা সমাধান করে, কারণ এটি আপনাকে যেকোনো স্তরের কম্পোনেন্টে ডেটা সরবরাহ করতে সাহায্য করে।

   উদাহরণ: Without Context API, props drilling might look like this:

   function App() {
     return <ChildComponent user={{ name: 'Alice' }} />;
   }
   
   function ChildComponent({ user }) {
     return <GrandchildComponent user={user} />;
   }
   
   function GrandchildComponent({ user }) {
     return <p>Hello, {user.name}!</p>;
   }
   

   With Context API, you can directly pass the data to any component:

   const UserContext = React.createContext();
   
   function App() {
     return (
       <UserContext.Provider value={{ name: 'Alice' }}>
         <ChildComponent />
       </UserContext.Provider>
     );
   }
   
   function ChildComponent() {
     return <GrandchildComponent />;
   }
   
   function GrandchildComponent() {
     return (
       <UserContext.Consumer>
         {({ name }) => <p>Hello, {name}!</p>}
       </UserContext.Consumer>
     );
   }
   

2. Global State Management: Context API ব্যবহার করে আপনি একটি অ্যাপ্লিকেশনের global state বা শেয়ারড ডেটা সরবরাহ করতে পারেন। যেমন, ব্যবহারকারীর লগইন তথ্য, থিম সেটিংস, ভাষা নির্বাচন, ইত্যাদি। এই ধরনের তথ্য আপনি একাধিক কম্পোনেন্টে সহজেই অ্যাক্সেস করতে পারেন।
3. Performance Optimization: যখন আপনি global state ব্যবহার করতে চান, তখন Context API আপনাকে unnecessary re-renders এড়াতে সাহায্য করতে পারে। আপনি যখন Context API ব্যবহার করেন, তখন আপনি শুধুমাত্র সেই কম্পোনেন্টগুলোই রি-রেন্ডার করেন যেগুলি Context এর ডেটার উপর নির্ভরশীল।
4. Simplifies Complex State Management: Context API ছোট অ্যাপ্লিকেশনের জন্য সহজ state management সমাধান প্রদান করে। এটি বিশেষভাবে উপকারী যখন আপনি Redux বা অন্যান্য জটিল state management লাইব্রেরি ব্যবহার করতে চান না বা প্রয়োজনে তা এড়িয়ে যেতে চান।

Context API ব্যবহারের উদাহরণ

১. Context তৈরি করা

প্রথমে, একটি Context তৈরি করতে হয়:

const ThemeContext = React.createContext('light'); // default value 'light'

২. Provider ব্যবহার করা

এখন, Provider ব্যবহার করে ডেটা সরবরাহ করতে হয়:

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

৩. Consumer ব্যবহার করা

অথবা, useContext হুক ব্যবহার করে, আপনি সরাসরি Context থেকে ডেটা নিয়ে ব্যবহার করতে পারেন:

function Child() {
  const theme = React.useContext(ThemeContext);
  return <p>The current theme is {theme}</p>;
}

এখানে, Child কম্পোনেন্ট ThemeContext থেকে ডেটা গ্রহণ করে এবং UI তে প্রদর্শন করে।

সারাংশ

ReactJS-এ Context API হল একটি শক্তিশালী টুল যা আপনাকে global state বা শেয়ারড ডেটা সহজভাবে ম্যানেজ করতে দেয়। এটি props drilling সমাধান করে, অ্যাপ্লিকেশনের বিভিন্ন স্তরে ডেটা পৌঁছাতে সহায়তা করে, এবং একটি কমপ্লেক্স অ্যাপ্লিকেশনে state management সহজ করে তোলে। React Context API ছোট থেকে মাঝারি আকারের অ্যাপ্লিকেশনের জন্য একটি সোজা এবং কার্যকর সমাধান, যদিও বড় আকারের অ্যাপ্লিকেশনের জন্য Redux বা MobX মতো টুলও বিবেচনা করা যেতে পারে।