useContext Hook এর মাধ্যমে Context API ব্যবহার

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 হুক ব্যবহার করে অ্যাপ্লিকেশনটি আরও স্কেলেবল এবং পরিষ্কারভাবে পরিচালিত হয়।