React Context API

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

React Context API কী?

React Context API হল একটি React ফিচার যা আপনাকে একটি ভ্যালু (ডেটা) অ্যাপ্লিকেশনটির বিভিন্ন স্তরের কম্পোনেন্টে সরাসরি পাস করার সুবিধা দেয়। আপনি একবার ডেটা তৈরি করলে তা অ্যাপ্লিকেশনের যেকোনো কম্পোনেন্টে উপভোগ করতে পারেন, এবং আপনাকে আর বারবার সেই ডেটা পাস করতে হবে না। এটি মূলত props drilling-এর বিকল্প, যেখানে আপনাকে ডেটা অনেকগুলো স্তরের মাধ্যমে পাস করতে হয়।

React Context API এর মূল অংশ

React Context API তে প্রধানত তিনটি অংশ থাকে:

1. React.createContext(): এটি একটি Context অবজেক্ট তৈরি করে, যা আপনাকে ভ্যালু শেয়ার করতে সাহায্য করবে।
2. Context.Provider: এটি সেই কম্পোনেন্ট যা Context-এর মাধ্যমে ডেটা প্রদান করে।
3. Context.Consumer: এটি সেই কম্পোনেন্ট যা Context থেকে ডেটা গ্রহণ করে।

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

ধরা যাক, আমরা একটি অ্যাপ্লিকেশন তৈরি করতে যাচ্ছি যেখানে ইউজারের নাম সব জায়গায় শো করা হবে, এবং এই নামটি যেকোনো কম্পোনেন্ট থেকে অ্যাক্সেস করা যাবে। React Context API ব্যবহার করে আমরা এই নামটি শেয়ার করব।

১. Context তৈরি করা:

প্রথমে, React.createContext() ব্যবহার করে একটি Context তৈরি করি।

import React from 'react';

// Context তৈরি করা
const UserContext = React.createContext();

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

এখন UserContext.Provider ব্যবহার করে আমরা Context-এর ভ্যালু প্রদান করব। Provider কম্পোনেন্টটি তার সবার সন্তান কম্পোনেন্টগুলোকে সেই ভ্যালু প্রদান করবে।

function App() {
  const user = { name: 'John', age: 30 };

  return (
    // UserContext.Provider দিয়ে user ডেটা পাস করা
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

এখানে, আমরা user ডেটা UserContext.Provider এর মাধ্যমে অ্যাপ্লিকেশনের যেকোনো কম্পোনেন্টে অ্যাক্সেস করার জন্য প্রদান করছি।

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

এখন যেকোনো কম্পোনেন্টে আমরা UserContext.Consumer ব্যবহার করে ওই ডেটা গ্রহণ করতে পারি। উদাহরণস্বরূপ, Child কম্পোনেন্টে আমরা user ডেটা গ্রহণ করতে পারি।

function Child() {
  return (
    <UserContext.Consumer>
      {(user) => <h1>Hello, {user.name}! You are {user.age} years old.</h1>}
    </UserContext.Consumer>
  );
}

এখানে, UserContext.Consumer-এর ভিতরে একটি ফাংশন থাকে যা user ডেটা পেয়ে থাকে এবং সেই ডেটা রেন্ডার করা হয়।

React Context API এর সুবিধা

1. Props Drilling থেকে মুক্তি: React Context API, props drilling সমস্যার সমাধান দেয়। আপনি যখন একাধিক স্তরের মধ্যে ডেটা পাস করতে চান না, তখন Context API ব্যবহার করে সহজে ডেটা শেয়ার করা যায়।
2. শেয়ারড ডেটা: Context API দিয়ে আপনি যেকোনো ধরনের শেয়ারড ডেটা যেমন ইউজার ইনফরমেশন, থিম, ভাষা নির্বাচন, ইত্যাদি আপনার অ্যাপ্লিকেশনে সহজেই শেয়ার করতে পারেন।
3. কম্পোনেন্ট মেইন্টেনেন্স সহজ করা: Context API ব্যবহারের ফলে কোডের কম্পোনেন্ট কাঠামো সহজ ও পরিষ্কার থাকে, কারণ আপনি একাধিক কম্পোনেন্টে একই ডেটা শেয়ার করতে পারেন যেকোনো স্তরের মধ্য দিয়ে।
4. Global State Management: React Context API প্রাথমিকভাবে গ্লোবাল স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হতে পারে, বিশেষ করে ছোট-আকারের অ্যাপ্লিকেশনগুলোতে। Redux বা MobX-এর মতো জটিল স্টেট ম্যানেজমেন্ট লাইব্রেরির প্রয়োজন ছাড়াই গ্লোবাল স্টেট পরিচালনা করা যায়।

React Context API এর সীমাবদ্ধতা

1. বড় অ্যাপ্লিকেশনে পারফরম্যান্স সমস্যা: React Context API শুধুমাত্র ডেটা পাস করার জন্য ব্যবহৃত হলেও, এটি একটি "হোস্টেড" ডেটা প্রদান করে। যদি আপনি অনেকগুলো কম্পোনেন্টের মধ্যে Context ব্যবহার করেন, তবে এটি পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে, কারণ প্রতিটি পরিবর্তিত ভ্যালু সমস্ত কম্পোনেন্টে রেন্ডার হতে পারে।
2. Complex State Management এর জন্য Redux বা MobX এর প্রয়োজন হতে পারে: Context API সাধারণভাবে ছোট এবং মাঝারি আকারের অ্যাপ্লিকেশনের জন্য আদর্শ, তবে জটিল স্টেট ম্যানেজমেন্টের জন্য Redux বা MobX ব্যবহার করাই ভালো।

Context API এবং Hooks

React 16.3 এর পর, React Hooks (যেমন useContext) Context API-এর সাথে আরও সহজে কাজ করতে সহায়তা করে। Hooks ব্যবহার করলে, আপনি Context থেকে ডেটা গ্রহণ করতে আরও সহজ এবং পরিষ্কার উপায়ে কাজ করতে পারেন।

উদাহরণ: useContext Hook ব্যবহার করা

import React, { useContext } from 'react';

// Context তৈরি করা
const UserContext = React.createContext();

function App() {
  const user = { name: 'John', age: 30 };

  return (
    <UserContext.Provider value={user}>
      <Child />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <h1>Hello, {user.name}! You are {user.age} years old.</h1>;
}

এখানে, useContext(UserContext) ব্যবহার করে সরাসরি user ডেটা নেয়া হচ্ছে, যা অনেক সহজ এবং পরিষ্কার।

সারাংশ

React Context API হল একটি শক্তিশালী টুল যা আপনাকে একটি অ্যাপ্লিকেশন জুড়ে ডেটা শেয়ার করতে সাহায্য করে, বিশেষ করে যখন ডেটা অনেকগুলি কম্পোনেন্টে পাস করার প্রয়োজন হয়। এটি props drilling সমস্যা সমাধান করতে ব্যবহৃত হয় এবং React অ্যাপ্লিকেশনের মধ্যে শেয়ারড ডেটা পরিচালনা করার জন্য একটি সহজ এবং কার্যকরী উপায়। Context API ছোট অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত হলেও, বড় এবং জটিল অ্যাপ্লিকেশনগুলিতে পারফরম্যান্স সমস্যা হতে পারে, যেখানে Redux বা MobX ব্যবহার করা ভাল।

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 মতো টুলও বিবেচনা করা যেতে পারে।

ReactJS-এ Props Drilling একটি সাধারণ সমস্যা, যেখানে একজন প্যারেন্ট কম্পোনেন্ট থেকে একাধিক লেভেলের নীচে (child, grandchild, etc.) প্রপস পাস করতে হয়। এই প্রক্রিয়াটি কোডে পুনরাবৃত্তি তৈরি করতে পারে এবং অ্যাপ্লিকেশনটি জটিল হয়ে যেতে পারে। Context API এই সমস্যার সমাধান প্রদান করে, যেখানে আপনি একটি প্রপসকে ডাইরেক্টলি কম্পোনেন্ট হায়ারার্কির নিচে নীচে পাঠানোর বদলে, কেন্দ্রীয়ভাবে (globally) স্টোর করতে পারেন এবং সহজেই যেকোনো কম্পোনেন্ট থেকে অ্যাক্সেস করতে পারেন।

Context API আপনাকে "global state" তৈরি করতে এবং সেই স্টেটটি ডাইরেক্টলি নির্দিষ্ট কম্পোনেন্টগুলিতে পাস করতে সাহায্য করে, এর ফলে props drilling এড়ানো যায়।

Context API কিভাবে কাজ করে?

Context API তিনটি প্রধান উপাদানে কাজ করে:

1. React.createContext() – একটি নতুন context তৈরি করে।
2. Provider – context এর মান (value) প্রদান করে এবং সেই মানটি হায়ারার্কির নিচের কম্পোনেন্টগুলির কাছে পৌঁছায়।
3. Consumer – context থেকে মান গ্রহণ করে এবং সেই মানের উপর নির্ভরশীল রেন্ডারিং করে।

এগুলো ব্যবহার করে আপনি সহজে props না দিয়ে, কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করতে পারেন।

Context API ব্যবহার করার ধাপ:

১. Context তৈরি করা

প্রথমে একটি নতুন context তৈরি করতে হবে। এটি React.createContext() মেথড দিয়ে করা হয়।

import React, { createContext, useState } from 'react';

// Context তৈরি করা
const MyContext = createContext();

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

Provider কম্পোনেন্টটি context-এর মান (value) প্রদান করে এবং সেই মানটি যেকোনো child কম্পোনেন্টে অ্যাক্সেস করা যায়।

function App() {
  const [user, setUser] = useState('John Doe');

  return (
    <MyContext.Provider value={user}>
      <Child />
    </MyContext.Provider>
  );
}

এখানে, MyContext.Provider কম্পোনেন্টের মাধ্যমে user স্টেট প্যারেন্ট কম্পোনেন্ট (App) থেকে child কম্পোনেন্টে পাঠানো হচ্ছে।

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

যখন আপনি context থেকে মান গ্রহণ করতে চান, তখন Consumer ব্যবহার করা হয়। এটি child কম্পোনেন্টের মধ্যে context এর মান অ্যাক্সেস করতে সাহায্য করে।

function Child() {
  return (
    <MyContext.Consumer>
      {(value) => <h1>Hello, {value}</h1>}
    </MyContext.Consumer>
  );
}

এখানে, MyContext.Consumer context থেকে user মান গ্রহণ করছে এবং এটি h1 ট্যাগে রেন্ডার হচ্ছে।

৪. useContext Hook ব্যবহার করা

React 16.8 এর পর useContext হুকটি পরিচিতি পেয়েছে, যা Consumer কম্পোনেন্টের পরিবর্তে ব্যবহার করা যেতে পারে। এটি কোডকে আরও ক্লিন এবং রিডেবল করে তোলে।

import React, { useContext } from 'react';

function Child() {
  const user = useContext(MyContext);

  return <h1>Hello, {user}</h1>;
}

এখানে, useContext হুকটি MyContext থেকে মান সরাসরি গ্রহণ করে এবং কম্পোনেন্টে রেন্ডার করা হচ্ছে। Consumer কম্পোনেন্টের চেয়ে এটি বেশি সহজ এবং পরিষ্কার।

Props Drilling এবং Context API এর মধ্যে পার্থক্য

• Props Drilling: যখন আপনি একটি প্রপস প্যারেন্ট কম্পোনেন্ট থেকে একাধিক লেভেলে (child, grandchild ইত্যাদি) পাস করেন, এটা props drilling বলা হয়। এতে কোডের পুনরাবৃত্তি হয় এবং স্টেট বা ডেটা শেয়ার করা কঠিন হয়ে পড়ে।
• Context API: Context API স্টেট বা ডেটা সরাসরি বিভিন্ন কম্পোনেন্টে পৌঁছানোর জন্য ব্যবহৃত হয়, ফলে props drilling সমস্যা সমাধান হয়। এটি হায়ারার্কির বাইরে ডেটা শেয়ার করতে সহজ করে তোলে।

Context API দিয়ে Props Drilling এর সমস্যা সমাধান

ধরা যাক, আপনি একটি অ্যাপে অনেক স্তরের কম্পোনেন্টে ডেটা পাস করতে চান, যেমন একটি প্যারেন্ট কম্পোনেন্ট থেকে child, grandchild ইত্যাদি কম্পোনেন্টে। যদি প্রতিটি স্তরে প্রপস পাস করতে হয়, তাহলে কোডটি জটিল হয়ে যাবে।

Props Drilling উদাহরণ:

function Grandparent() {
  const user = 'John Doe';
  return <Parent user={user} />;
}

function Parent(props) {
  return <Child user={props.user} />;
}

function Child(props) {
  return <h1>Hello, {props.user}</h1>;
}

এখানে, user প্রপসটি Grandparent থেকে Parent এবং তারপর Child কম্পোনেন্টে পাস করা হচ্ছে। যদি আরও স্তর যুক্ত হয়, তাহলে কোডটি অনেক বড় এবং জটিল হয়ে যাবে।

Context API ব্যবহার করে সমাধান:

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function Grandparent() {
  const user = 'John Doe';
  return (
    <MyContext.Provider value={user}>
      <Parent />
    </MyContext.Provider>
  );
}

function Parent() {
  return <Child />;
}

function Child() {
  const user = useContext(MyContext);
  return <h1>Hello, {user}</h1>;
}

এখানে, user স্টেটটি MyContext.Provider এর মাধ্যমে সরাসরি Child কম্পোনেন্টে পাস করা হচ্ছে, ফলে props drilling পুরোপুরি এড়িয়ে যাওয়া হয়েছে।

সারাংশ

React-এর Context API আপনাকে কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করার একটি সহজ উপায় প্রদান করে, যার ফলে props drilling এড়ানো সম্ভব হয়। এটি আপনার অ্যাপ্লিকেশনকে আরও পরিষ্কার, মেইনটেনেবল এবং স্কেলেবল করে তোলে, বিশেষ করে বড় অ্যাপ্লিকেশনগুলোতে যেখানে একাধিক স্তরের কম্পোনেন্টে ডেটা পাস করতে হয়।

React Context API একটি শক্তিশালী ফিচার যা রিডাক্সের মতো স্টেট ম্যানেজমেন্ট টুলস ছাড়াই অ্যাপ্লিকেশন জুড়ে স্টেট বা ডেটা শেয়ার করতে সাহায্য করে। এটি মূলত গ্লোবাল স্টেট ম্যানেজমেন্টের কাজ করে, যেখানে আপনি একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে প্রপ্স (props) পাস না করে ডেটা শেয়ার করতে পারেন।

Context তৈরি এবং ব্যবহারের নিয়ম

১. Context তৈরি করা

React-এ Context তৈরি করতে React.createContext() মেথড ব্যবহার করা হয়। এটি একটি Context object তৈরি করে যা Provider এবং Consumer দুইটি প্রধান উপাদান সরবরাহ করে।

উদাহরণ:

import React from 'react';

// Context তৈরি করা
const MyContext = React.createContext();

// Default value নির্ধারণ করা
MyContext.displayName = "MyCustomContext";

এখানে, MyContext হল একটি Context object যা পরে Provider এবং Consumer মাধ্যমে ডেটা শেয়ার করতে ব্যবহার করা হবে।

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

Context এর Provider কম্পোনেন্ট ব্যবহার করে আপনি নির্দিষ্ট ডেটা বা স্টেটকে Context-এর মাধ্যমে অ্যাপ্লিকেশনের সমস্ত সাব-কোম্পোনেন্টে সরবরাহ করতে পারেন। value প্রপার্টির মাধ্যমে আপনি যে ডেটা পাঠাতে চান তা নির্ধারণ করবেন।

উদাহরণ:

import React, { useState } from 'react';
import { MyContext } from './MyContext';

const App = () => {
  const [user, setUser] = useState('John Doe');

  return (
    <MyContext.Provider value={user}>
      <UserProfile />
    </MyContext.Provider>
  );
};

export default App;

এখানে, App কম্পোনেন্টে user স্টেটটি MyContext.Provider এর মাধ্যমে UserProfile কম্পোনেন্টে পাঠানো হচ্ছে।

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

Consumer ব্যবহার করে আপনি Context থেকে ডেটা গ্রহণ করতে পারেন। Consumer একটি ফাংশনকে কনজাম্পশন হিসেবে গ্রহণ করে, যা value প্রপার্টির মাধ্যমে Context থেকে ডেটা পাবে।

উদাহরণ:

import React from 'react';
import { MyContext } from './MyContext';

const UserProfile = () => {
  return (
    <MyContext.Consumer>
      {(user) => <h1>Welcome, {user}</h1>}
    </MyContext.Consumer>
  );
};

export default UserProfile;

এখানে, UserProfile কম্পোনেন্টটি MyContext.Consumer ব্যবহার করে user ডেটা গ্রহণ করছে এবং রেন্ডার করছে।

৪. useContext Hook ব্যবহার করা (Functional Component)

React 16.8-এ useContext hook যুক্ত করা হয়েছে, যার মাধ্যমে functional components-এ Context ডেটা আরও সহজে গ্রহণ করা যায়। এটি Consumer এর তুলনায় আরো সহজ এবং পরিষ্কার উপায়।

উদাহরণ:

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

const UserProfile = () => {
  const user = useContext(MyContext); // Context থেকে ডেটা নেওয়া
  return <h1>Welcome, {user}</h1>;
};

export default UserProfile;

এখানে, useContext(MyContext) ব্যবহার করে user ডেটা সরাসরি নেয়া হচ্ছে এবং UI তে রেন্ডার করা হচ্ছে।

৫. Context ডেটা আপডেট করা

Context এর ডেটা আপডেট করতে, আপনি Provider এর value প্রপার্টিতে যে স্টেট বা ফাংশন পাঠাচ্ছেন তা পরিবর্তন করতে পারেন। সাধারণত, স্টেট আপডেট করতে useState বা useReducer হুক ব্যবহার করা হয়।

উদাহরণ:

import React, { useState } from 'react';
import { MyContext } from './MyContext';

const App = () => {
  const [user, setUser] = useState('John Doe');

  const changeUser = () => {
    setUser('Jane Smith');
  };

  return (
    <MyContext.Provider value={{ user, changeUser }}>
      <UserProfile />
      <button onClick={changeUser}>Change User</button>
    </MyContext.Provider>
  );
};

export default App;

এখানে, changeUser ফাংশনটি MyContext.Provider এর মাধ্যমে UserProfile কম্পোনেন্টে পাঠানো হচ্ছে, যাতে কম্পোনেন্ট Context থেকে ডেটা আপডেট করতে পারে।

সারাংশ

React Context API একটি সহজ উপায়ে অ্যাপ্লিকেশনের বিভিন্ন অংশের মধ্যে ডেটা শেয়ার করতে ব্যবহৃত হয়। createContext দিয়ে Context তৈরি, Provider দিয়ে ডেটা প্রদান, এবং Consumer বা useContext হুক দিয়ে ডেটা গ্রহণ করা হয়। এটি React অ্যাপ্লিকেশনকে আরও মডুলার এবং স্কেলেবল করে তোলে, যেখানে স্টেট ব্যবস্থাপনা সহজ এবং পরিষ্কার থাকে।

ReactJS-এ Context API একটি শক্তিশালী বৈশিষ্ট্য যা একটি অ্যাপ্লিকেশন জুড়ে ডেটা শেয়ার করার জন্য ব্যবহৃত হয়, বিশেষত যখন ডেটা অনেক কম্পোনেন্টের মধ্যে প্রপস (props) হিসেবে পাস করতে হয়। Context API ডেটা শেয়ার করার জন্য একটি সহজ ও কার্যকর উপায় প্রদান করে, যা প্রপস ড্রিলিং (prop drilling) সমস্যার সমাধান করে।

React 16.3-এ Context API পরিচিতি পেয়েছিল, এবং useContext হুক দিয়ে এটি ব্যবহারের সুবিধা আরও বৃদ্ধি পেয়েছে। useContext হুক React অ্যাপ্লিকেশন এর মধ্যে গ্লোবাল স্টেট শেয়ার এবং ব্যবহার করা সহজ করে তোলে।

useContext Hook কী?

useContext হল একটি React হুক যা আপনাকে একটি Context object এর মান (value) অ্যাক্সেস করতে সহায়তা করে। যখন আপনার অ্যাপ্লিকেশন বা কম্পোনেন্টে একই ডেটা অনেক জায়গায় ব্যবহৃত হয়, তখন Context API ব্যবহারের মাধ্যমে এই ডেটা একবারে শেয়ার করা সম্ভব হয়, এবং useContext হুক দিয়ে সেই ডেটা সহজেই যেকোনো কম্পোনেন্টে ব্যবহার করা যায়।

Context API ব্যবহার করার ধাপসমূহ:

1. Context তৈরি করা: প্রথমে একটি Context তৈরি করতে হবে, যেটি ডেটা শেয়ার করবে।
2. Provider ব্যবহার করা: Context.Provider ব্যবহার করে আপনি Context এর মান (value) কম্পোনেন্ট tree-তে পাস করেন।
3. useContext হুক ব্যবহার করা: useContext হুক ব্যবহার করে আপনি যে Context তৈরি করেছেন, তার মান অ্যাক্সেস করতে পারেন।

Context API এবং useContext হুক এর উদাহরণ

ধরি, আমাদের একটি অ্যাপ্লিকেশনে ইউজারের থিম (theme) স্টেট রয়েছে, যা আমরা Context API এবং useContext হুক ব্যবহার করে শেয়ার করতে চাই।

১. Context তৈরি করা

প্রথমে একটি Context তৈরি করতে হবে।

import React, { createContext, useState } from 'react';

// Context তৈরি করা
const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light'); // স্টেট ডিফাইন করা

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    // Context.Provider এর মাধ্যমে value পাস করা
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export { ThemeContext, ThemeProvider };

এখানে, ThemeContext তৈরি করা হয়েছে এবং ThemeProvider কম্পোনেন্টের মাধ্যমে থিমের মান (value) শেয়ার করা হচ্ছে। toggleTheme ফাংশনটি থিম পরিবর্তন করতে ব্যবহৃত হবে।

২. Context ব্যবহার করা (useContext)

এখন, useContext হুক ব্যবহার করে আমরা যে কম্পোনেন্টে থিমের মান প্রয়োজন, সেখানে সেই মানটি অ্যাক্সেস করব।

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeProvider';

const ThemeSwitcher = () => {
  const { theme, toggleTheme } = useContext(ThemeContext); // useContext দিয়ে মান পেতে হবে

  return (
    <div style={{ background: theme === 'light' ? '#fff' : '#333', color: theme === 'light' ? '#000' : '#fff' }}>
      <h1>The current theme is {theme}</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

export default ThemeSwitcher;

এখানে, useContext(ThemeContext) হুক ব্যবহার করে থিমের মান (theme) এবং থিম পরিবর্তনের জন্য toggleTheme ফাংশন অ্যাক্সেস করা হয়েছে।

৩. ThemeProvider দিয়ে অ্যাপ্লিকেশন র‍্যাপ করা

অবশেষে, ThemeProvider কম্পোনেন্টের মাধ্যমে অ্যাপ্লিকেশনকে র‍্যাপ করতে হবে যাতে Context এর মান সঠিকভাবে শেয়ার করা যায়।

import React from 'react';
import { ThemeProvider } from './ThemeProvider';
import ThemeSwitcher from './ThemeSwitcher';

const App = () => {
  return (
    <ThemeProvider>
      <ThemeSwitcher />
    </ThemeProvider>
  );
};

export default App;

এখানে, ThemeProvider কে র‍্যাপার হিসেবে ব্যবহার করা হয়েছে, যাতে ThemeSwitcher কম্পোনেন্টের মধ্যে Context এর মান অ্যাক্সেস করা যায়।

useContext এর সুবিধা

1. ডেটা শেয়ারিং সহজ করে: useContext আপনাকে কম্পোনেন্ট ট্রী-তে ডেটা শেয়ার করার জন্য সহজ এবং পরিষ্কার উপায় প্রদান করে।
2. Prop drilling সমস্যা সমাধান: যখন অনেক স্তরের কম্পোনেন্টে ডেটা পাস করতে হয়, তখন useContext ব্যবহার করলে প্রপস ড্রিলিং সমস্যার সমাধান হয়।
3. গ্লোবাল স্টেট ম্যানেজমেন্ট: Context API এবং useContext হুক ব্যবহার করে আপনি একটি সহজ গ্লোবাল স্টেট ম্যানেজমেন্ট সিস্টেম তৈরি করতে পারেন।

useContext এবং Performance Optimization

useContext হুক ব্যবহারের সময় কিছু পারফরম্যান্স সমস্যাও দেখা দিতে পারে, বিশেষ করে যখন Context-এর মান অনেকবার পরিবর্তিত হয়। যেহেতু React কম্পোনেন্টগুলি Context থেকে মান গ্রহণ করে এবং প্রতিবার পরিবর্তন হলে কম্পোনেন্টগুলি পুনরায় রেন্ডার হয়, তাই খুব বড় অ্যাপ্লিকেশনে পারফরম্যান্স অপটিমাইজেশন প্রয়োজন হতে পারে।

এতে সমাধান হিসেবে:

• Memoization ব্যবহার করা যেতে পারে।
• React.memo এবং useMemo হুক ব্যবহার করে কম্পোনেন্ট রেন্ডার অপটিমাইজ করা যায়।

সারাংশ

ReactJS-এ useContext হুক Context API ব্যবহারের একটি অত্যন্ত সুবিধাজনক উপায়। এটি ব্যবহারকারীর জন্য সহজে ডেটা শেয়ার এবং একাধিক কম্পোনেন্টের মধ্যে গ্লোবাল স্টেট ম্যানেজমেন্ট করা সম্ভব করে। Context API এবং useContext হুক ব্যবহার করে অ্যাপ্লিকেশনটি আরও স্কেলেবল এবং পরিষ্কারভাবে পরিচালিত হয়।