React Context কীভাবে সেটআপ করবেন
প্রপ ড্রিলিং (Prop drilling) আপনার কোড নষ্ট করে দেয়। আপনি এমন পাঁচটি লেয়ারের কম্পোনেন্টের মধ্য দিয়ে ডেটা পাস করেন যাদের এটি প্রয়োজন নেই। React Context এটি সমাধান করে। তবে, বেশিরভাগ সেটআপ একটি নতুন সমস্যা তৈরি করে।
যখন আপনি কোনো কনটেক্সট হুকের ওপর "Go to Definition" ব্যবহার করেন, তখন আপনি প্রায়শই এমন একটি ফাইলে পৌঁছান যেখানে একটি ছোট useContext কল ছাড়া আর কিছুই নেই। আসল লজিক অন্য একটি ফাইলে থাকে। ফলে আপনি আপনার পুরো দিনটি স্টেট লজিক খুঁজে দেখাতেই ব্যয় করেন।
আপনি একটি উন্নত কাঠামোর মাধ্যমে এটি সমাধান করতে পারেন।
এই প্যাটার্নটি অনুসরণ করুন:
- কনটেক্সট, পাবলিক হুক এবং স্টেট লজিক একটি ফাইলেই রাখুন।
- Provider-কে একটি পাতলা শেল (thin shell) হিসেবে রাখুন।
- আপনার প্রাইভেট লজিক সুরক্ষিত রাখতে একটি লিন্ট রুল (lint rule) ব্যবহার করুন।
আপনার ফাইলগুলো এভাবে সাজান:
src/context/ • GameContext.ts (Context, পাবলিক হুক এবং স্টেট লজিক) • GameProvider.tsx (একটি পাতলা শেল)
GameContext.ts-এর ভেতরে তিনটি অংশ তৈরি করুন:
- কনটেক্সট অবজেক্ট।
- কম্পোনেন্ট ব্যবহারের জন্য একটি পাবলিক হুক। যদি কনটেক্সট
nullহয়, তবে এই হুকটির অবশ্যই একটি এরর (error) থ্রো করা উচিত। এটি নিশ্চিত করে যে আপনার কম্পোনেন্টগুলো যদি প্রোভাইডারের বাইরে থাকে, তবে সেগুলো দ্রুত ত্রুটি প্রদর্শন করবে। - স্টেট ম্যানেজমেন্টের জন্য একটি প্রাইভেট হুক। এই হুকে আপনার
useStateবাuseReducerকলগুলো থাকবে।
পাবলিক হুক এবং প্রাইভেট লজিক একই ফাইলে রাখার ফলে "Go to Definition" নিখুঁতভাবে কাজ করে। আপনি সরাসরি কম্পোনেন্ট থেকে লজিকে চলে যেতে পারেন।
একটি ঝুঁকি রয়েছে। যেহেতু প্রাইভেট হুকটি এক্সপোর্ট করা হয় যাতে Provider এটি ব্যবহার করতে পারে, তাই আপনার কোনো সহকর্মী ভুল জায়গায় এটি কল করতে পারেন। যদি তারা এমনটি করেন, তবে তারা শেয়ারড কনটেক্সট ব্যবহার করার পরিবর্তে একটি নতুন, বিচ্ছিন্ন স্টেট তৈরি করে ফেলবেন।
এটি রোধ করতে কমেন্ট ব্যবহার করা বন্ধ করুন। পরিবর্তে একটি ESLint রুল ব্যবহার করুন।
আমি এটি সমাধান করার জন্য eslint-plugin-restrict-callers তৈরি করেছি। আপনি নির্ধারণ করতে পারেন কোন ফাংশনগুলো নির্দিষ্ট হুক কল করার অনুমতি পাবে।
উদাহরণস্বরূপ, আপনি ESLint-কে বলতে পারেন যে শুধুমাত্র GameProvider-ই useGameStateManagement কল করতে পারবে। অন্য কেউ চেষ্টা করলে, একটি স্পষ্ট এরর মেসেজসহ বিল্ড ফেইল করবে।
কাজের ধাপগুলোর সারসংক্ষেপ:
- কনটেক্সট, পাবলিক হুক এবং প্রাইভেট লজিক একটি ফাইলে গ্রুপ করুন।
- Provider ব্যবহার করুন শুধুমাত্র হুকের রেজাল্টটি প্রোভাইডার ভ্যালুতে পাস করার জন্য।
- কনটেক্সট না থাকলে পাবলিক হুকে এরর থ্রো করুন।
- পাবলিক এবং প্রাইভেট হুকের মধ্যে সীমানা বজায় রাখতে ESLint ব্যবহার করুন।
উৎস: https://dev.to/jareddlewis/how-to-set-up-react-context-2c9h