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

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