Uddeshyo | Student Super App

11. React Hooks (useContext)

📘 কনসেপ্ট (থিওরি)

রিঅ্যাক্ট কনটেক্সট (Context) হলো গ্লোবালি স্টেট ম্যানেজ করার একটি উপায়।
ম্যানুয়ালি নিচে প্রপস পাঠানোর (prop drilling) চেয়ে অনেক গভীরে থাকা কম্পোনেন্টগুলোর মধ্যে আরও সহজে স্টেট শেয়ার করতে এটি useState হুকের সাথে একত্রে ব্যবহার করা যেতে পারে।

১. কনটেক্সট তৈরি করুন: const MyContext = createContext();
২. চাইল্ড কম্পোনেন্টগুলোকে কনটেক্সট প্রোভাইডারে (Context Provider) মুড়িয়ে দিন এবং স্টেটের মান সরবরাহ করুন।
৩. স্টেটে অ্যাক্সেস পেতে চাইল্ড কম্পোনেন্টে useContext হুক ব্যবহার করুন।

💡 উদাহরণ

কনটেক্সট এর ব্যবহার:

import { useState, createContext, useContext } from "react";

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Jesse Hall");
  return (
    
      
    
  );
}

function Component2() {
  const user = useContext(UserContext);
  return {user} again!;
}

🎯 আপনার কাজ (প্র্যাকটিস)

একটি কনটেক্সট ThemeContext তৈরি করুন। একটি কম্পোনেন্ট তৈরি করুন যা মান "dark" প্রদান করে। একটি চাইল্ড কম্পোনেন্টের ভেতরে, থিমটি পড়তে এবং প্রিন্ট করতে useContext ব্যবহার করুন।

main.react

OUTPUT

Run your code to see the output here...