যে কম্পোনেন্টগুলোর ডেটা শেয়ার করা দরকার তারা কাছাকাছি থাকলে state উপরে তোলা ভালো কাজ করে। একটি মান — বর্তমান থিম, লগইন করা ব্যবহারকারী, বেছে নেওয়া ভাষা — ট্রি জুড়ে গভীরে ছড়িয়ে থাকা কম্পোনেন্টের দরকার হলে এটা ভেঙে পড়ে, মাঝখানে এমন কম্পোনেন্টের স্তর থাকে যাদের নিজেদের কোনো কারণ ছাড়াই এটা পাস করতে হবে।
function App() {
const [theme, setTheme] = useState('light');
return <Page theme={theme} />;
}
function Page({ theme }) {
return <Sidebar theme={theme} />; // Page never actually uses theme itself
}
function Sidebar({ theme }) {
return <Avatar theme={theme} />; // neither does Sidebar
}
function Avatar({ theme }) {
return <img className={theme} />; // only this one actually needs it
}এই চেইন — নিজেরা ব্যবহার করে না এমন কম্পোনেন্টের মধ্য দিয়ে একটি প্রপ পাস করা, শুধু যেটা ব্যবহার করে সেটাতে পৌঁছাতে — একে বলা হয় prop drilling। এটা কাজ করে, কিন্তু মাঝখানের প্রতিটি কম্পোনেন্টকে এমন কিছুর উপর নির্ভরশীল করে তোলে যা আসলে তার বিষয় না।
import { createContext, useState, useContext } from 'react';
const ThemeContext = createContext(null);
function App() {
const [theme, setTheme] = useState('light');
return (
<ThemeContext.Provider value={theme}>
<Page />
</ThemeContext.Provider>
);
}Provider-এর ভেতরে যেকোনো জায়গার যেকোনো কম্পোনেন্ট সরাসরি মানটা পড়তে পারে — মাঝখানের কম্পোনেন্টের মধ্য দিয়ে একদমই কোনো props পাস করা ছাড়া:
function Page() {
return <Sidebar />; // no theme prop needed here anymore
}
function Sidebar() {
return <Avatar />; // or here
}
function Avatar() {
const theme = useContext(ThemeContext); // reads it directly
return <img className={theme} />;
}Context সত্যিকারভাবে গ্লোবাল, কমই-বদলায়-এমন মানের জন্য সঠিক টুল — থিম, লগইন করা ব্যবহারকারী, বর্তমান locale। শুধু দুই-তিনটি কাছাকাছি-সম্পর্কিত কম্পোনেন্টের মধ্যে শেয়ার করা state-এর জন্য, state উপরে তোলা (আগের পাঠ) সাধারণত সহজ আর ডেটা প্রবাহ ট্রেস করা সহজ রাখে। ডিফল্টভাবে, সব জায়গায় context-এর দিকে যাওয়া একটি সমস্যা (prop drilling) আরেকটির (ট্রেস-করা-কঠিন implicit নির্ভরতা) সাথে বদলে ফেলে।