Context API দিয়ে Props Drilling এড়ানো

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 এড়ানো সম্ভব হয়। এটি আপনার অ্যাপ্লিকেশনকে আরও পরিষ্কার, মেইনটেনেবল এবং স্কেলেবল করে তোলে, বিশেষ করে বড় অ্যাপ্লিকেশনগুলোতে যেখানে একাধিক স্তরের কম্পোনেন্টে ডেটা পাস করতে হয়।