দক্ষ সাবস্ক্রিপশন ম্যানেজমেন্ট, ডেটা ফেচিং এবং UI আপডেটের জন্য React-এর experimental_useSubscription হুক ব্যবহার করুন। উন্নত পারফরম্যান্স এবং রেসপন্সিভনেসের জন্য সাবস্ক্রিপশন প্রয়োগ এবং অপ্টিমাইজ করার পদ্ধতি শিখুন।
React experimental_useSubscription: সাবস্ক্রিপশন ম্যানেজমেন্টের জন্য একটি বিস্তারিত গাইড
React-এর experimental_useSubscription হুক এক্সটার্নাল ডেটা সোর্সের সাবস্ক্রিপশন পরিচালনা করার জন্য একটি শক্তিশালী এবং কার্যকর উপায় প্রদান করে। এই পরীক্ষামূলক API-টি React কম্পোনেন্টদের অ্যাসিঙ্ক্রোনাস ডেটাতে সাবস্ক্রাইব করতে এবং ডেটা পরিবর্তিত হলে স্বয়ংক্রিয়ভাবে UI আপডেট করতে সাহায্য করে। এই গাইডটি experimental_useSubscription, এর সুবিধা, প্রয়োগের বিবরণ এবং এর ব্যবহার অপ্টিমাইজ করার সেরা অনুশীলনগুলির একটি বিস্তারিত আলোচনা প্রদান করে।
experimental_useSubscription কী?
experimental_useSubscription হুকটি React-এর একটি পরীক্ষামূলক ফিচার, যা এক্সটার্নাল ডেটা সোর্সে সাবস্ক্রাইব করার প্রক্রিয়াকে সহজ করার জন্য ডিজাইন করা হয়েছে। ঐতিহ্যগতভাবে, React-এ সাবস্ক্রিপশন পরিচালনা করা বেশ জটিল হতে পারে, যার মধ্যে ম্যানুয়াল সেটআপ, টিয়ারডাউন এবং স্টেট ম্যানেজমেন্ট অন্তর্ভুক্ত থাকে। experimental_useSubscription ডেটাতে সাবস্ক্রাইব করার জন্য একটি ডিক্লেয়ারেটিভ API প্রদান করে এই প্রক্রিয়াটিকে সহজ করে এবং ডেটা পরিবর্তন হলে স্বয়ংক্রিয়ভাবে কম্পোনেন্ট আপডেট করে। এর মূল সুবিধা হলো ম্যানুয়াল সাবস্ক্রিপশন ম্যানেজমেন্টের জটিলতা দূর করা, যা কোডকে আরও পরিষ্কার এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
গুরুত্বপূর্ণ নোট: এই API-টি পরীক্ষামূলক হিসেবে চিহ্নিত, যার মানে React-এর ভবিষ্যতের সংস্করণগুলিতে এটি পরিবর্তিত হতে পারে। এটি সাবধানে ব্যবহার করুন এবং সম্ভাব্য আপডেট বা পরিবর্তনের জন্য প্রস্তুত থাকুন।
কেন experimental_useSubscription ব্যবহার করবেন?
experimental_useSubscription-কে React-এ সাবস্ক্রিপশন পরিচালনার জন্য একটি আকর্ষণীয় বিকল্প করে তোলার পেছনে বেশ কিছু সুবিধা রয়েছে:
- সরলীকৃত সাবস্ক্রিপশন ম্যানেজমেন্ট: এটি একটি ডিক্লেয়ারেটিভ API প্রদান করে যা ডেটা সোর্সে সাবস্ক্রাইব করার প্রক্রিয়াকে সহজ করে, বয়লারপ্লেট কোড কমায় এবং কোডের পঠনযোগ্যতা বাড়ায়।
- স্বয়ংক্রিয় আপডেট: সাবস্ক্রাইব করা ডেটা পরিবর্তন হলেই কম্পোনেন্টগুলি স্বয়ংক্রিয়ভাবে রি-রেন্ডার হয়, যা নিশ্চিত করে যে UI সর্বশেষ ডেটার সাথে সিঙ্ক্রোনাইজ থাকে।
- পারফরম্যান্স অপটিমাইজেশন: React সাবস্ক্রিপশন ম্যানেজমেন্টকে অপ্টিমাইজ করে অপ্রয়োজনীয় রি-রেন্ডার কমায়, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে।
- বিভিন্ন ডেটা সোর্সের সাথে ইন্টিগ্রেশন: এটি বিভিন্ন ডেটা সোর্সের সাথে ব্যবহার করা যেতে পারে, যার মধ্যে GraphQL, Redux, Zustand, Jotai, এবং কাস্টম অ্যাসিঙ্ক্রোনাস ডেটা স্ট্রিম রয়েছে।
- বয়লারপ্লেট হ্রাস: ম্যানুয়ালি সাবস্ক্রিপশন সেট আপ এবং পরিচালনা করার জন্য প্রয়োজনীয় কোডের পরিমাণ কমিয়ে দেয়।
experimental_useSubscription কীভাবে কাজ করে
experimental_useSubscription হুকটি তার আর্গুমেন্ট হিসেবে একটি কনফিগারেশন অবজেক্ট নেয়। এই অবজেক্টটি নির্দিষ্ট করে যে কীভাবে ডেটা সোর্সে সাবস্ক্রাইব করতে হবে, কীভাবে প্রাসঙ্গিক ডেটা এক্সট্র্যাক্ট করতে হবে এবং কীভাবে পূর্ববর্তী ও বর্তমান ডেটা ভ্যালু তুলনা করতে হবে।
কনফিগারেশন অবজেক্টটিতে সাধারণত নিম্নলিখিত প্রপার্টিগুলি অন্তর্ভুক্ত থাকে:
createSubscription: একটি ফাংশন যা ডেটা সোর্সের সাবস্ক্রিপশন তৈরি করে। এই ফাংশনটিকে একটি অবজেক্ট রিটার্ন করতে হবে যার মধ্যে একটিgetCurrentValueমেথড এবং একটিsubscribeমেথড থাকবে।getCurrentValue: একটি ফাংশন যা সাবস্ক্রাইব করা ডেটার বর্তমান ভ্যালু রিটার্ন করে।subscribe: একটি ফাংশন যা একটি কলব্যাক আর্গুমেন্ট হিসেবে নেয় এবং ডেটা সোর্সে সাবস্ক্রাইব করে। ডেটা পরিবর্তন হলেই কলব্যাকটি কল করা উচিত।isEqual(ঐচ্ছিক): একটি ফাংশন যা দুটি ভ্যালু তুলনা করে এবং যদি তারা সমান হয় তবে true রিটার্ন করে। যদি এটি প্রদান করা না হয়, React তুলনার জন্য স্ট্রিক্ট ইকুয়ালিটি (===) ব্যবহার করবে। একটি অপ্টিমাইজডisEqualফাংশন প্রদান করলে অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করা যেতে পারে, বিশেষ করে জটিল ডেটা স্ট্রাকচারের ক্ষেত্রে।
বেসিক প্রয়োগের উদাহরণ
আসুন একটি সহজ উদাহরণ বিবেচনা করি যেখানে আমরা একটি টাইমার সাবস্ক্রাইব করব যা প্রতি সেকেন্ডে আপডেট হয়:
```javascript import React, { useState, useEffect } from 'react'; import { experimental_useSubscription as useSubscription } from 'react'; // Create a custom subscription object const timerSubscription = { getCurrentValue: () => Date.now(), subscribe: (callback) => { const intervalId = setInterval(callback, 1000); return () => clearInterval(intervalId); }, }; function TimerComponent() { const currentTime = useSubscription(timerSubscription); return (এই উদাহরণে:
- আমরা
getCurrentValueএবংsubscribeমেথডসহ একটিtimerSubscriptionঅবজেক্ট তৈরি করেছি। getCurrentValueবর্তমান টাইমস্ট্যাম্প রিটার্ন করে।subscribeএকটি ইন্টারভাল সেট আপ করে যা প্রতি সেকেন্ডে প্রদত্ত কলব্যাকটি কল করে। যখন কম্পোনেন্টটি আনমাউন্ট হয়, তখন ইন্টারভালটি ক্লিয়ার হয়ে যায়।TimerComponentবর্তমান সময় পেতে এবং তা প্রদর্শন করতেuseSubscriptionব্যবহার করেtimerSubscriptionঅবজেক্টটির সাথে।
অ্যাডভান্সড উদাহরণ এবং ব্যবহারের ক্ষেত্র
১. GraphQL-এর সাথে ইন্টিগ্রেশন
experimental_useSubscription ব্যবহার করে GraphQL সাবস্ক্রিপশনে সাবস্ক্রাইব করা যেতে পারে Apollo Client বা Relay-এর মতো লাইব্রেরি ব্যবহার করে। এখানে Apollo Client ব্যবহার করে একটি উদাহরণ দেওয়া হলো:
Loading...
; if (error) returnError: {error.message}
; return (-
{data.newMessages.map((message) => (
- {message.text} ))}
এই উদাহরণে:
NEW_MESSAGESহলো একটি GraphQL সাবস্ক্রিপশন যা Apollo Client-এর GraphQL সিনট্যাক্স ব্যবহার করে সংজ্ঞায়িত করা হয়েছে।useSubscriptionস্বয়ংক্রিয়ভাবে সাবস্ক্রিপশন পরিচালনা করে এবং নতুন মেসেজ পাওয়ার সাথে সাথে কম্পোনেন্ট আপডেট করে।
২. Redux-এর সাথে ইন্টিগ্রেশন
আপনি experimental_useSubscription ব্যবহার করে Redux স্টোরের পরিবর্তনে সাবস্ক্রাইব করতে পারেন। এটি কীভাবে করবেন তা এখানে দেখানো হলো:
এই উদাহরণে:
- আমরা একটি
reduxSubscriptionঅবজেক্ট তৈরি করেছি যা Redux স্টোরকে আর্গুমেন্ট হিসেবে নেয়। getCurrentValueস্টোরের বর্তমান স্টেট রিটার্ন করে।subscribeস্টোরে সাবস্ক্রাইব করে এবং স্টেট পরিবর্তন হলে কলব্যাকটি কল করে।ReduxComponentবর্তমান স্টেট পেতে এবং কাউন্ট প্রদর্শন করতেuseSubscriptionব্যবহার করেreduxSubscriptionঅবজেক্টটির সাথে।
৩. একটি রিয়েল-টাইম কারেন্সি কনভার্টার বাস্তবায়ন
আসুন একটি রিয়েল-টাইম কারেন্সি কনভার্টার তৈরি করি যা একটি এক্সটার্নাল API থেকে এক্সচেঞ্জ রেট নিয়ে আসে এবং রেট পরিবর্তন হলে UI আপডেট করে। এই উদাহরণটি দেখায় যে কীভাবে experimental_useSubscription একটি কাস্টম অ্যাসিঙ্ক্রোনাস ডেটা সোর্সের সাথে ব্যবহার করা যেতে পারে।
Currency Converter
setUsdAmount(parseFloat(e.target.value) || 0)} />Converted Amount ({selectedCurrency}): {convertedAmount}
মূল উন্নতি এবং ব্যাখ্যা:
- প্রাথমিক ফেচ:
startFetchingফাংশনটি এখন একটিasyncফাংশন।- এটি ইন্টারভাল সেট আপ করার আগে একটি প্রাথমিক
fetchExchangeRates()কল করে। এটি নিশ্চিত করে যে কম্পোনেন্টটি মাউন্ট হওয়ার সাথে সাথে ডেটা প্রদর্শন করে, প্রথম ইন্টারভাল শেষ হওয়ার জন্য অপেক্ষা না করে। - প্রথম ফেচের পরেই কলব্যাকটি ট্রিগার করা হয়, যা সাবস্ক্রিপশনটিকে সর্বশেষ রেট দিয়ে সঙ্গে সঙ্গে পপুলেট করে।
- ত্রুটি হ্যান্ডলিং:
- প্রাথমিক ফেচ, ইন্টারভালের মধ্যে এবং বর্তমান ভ্যালু ফেচ করার সময় সম্ভাব্য ত্রুটিগুলি পরিচালনা করার জন্য আরও ব্যাপক
try...catchব্লক যুক্ত করা হয়েছে। - ডিবাগিংয়ে সহায়তা করার জন্য কনসোলে ত্রুটির বার্তা লগ করা হয়।
- প্রাথমিক ফেচ, ইন্টারভালের মধ্যে এবং বর্তমান ভ্যালু ফেচ করার সময় সম্ভাব্য ত্রুটিগুলি পরিচালনা করার জন্য আরও ব্যাপক
- তাৎক্ষণিক কলব্যাক ট্রিগার:
- প্রাথমিক ফেচ অপারেশনের পরেই কলব্যাকটি কল করা নিশ্চিত করে যে ডেটা বিলম্ব ছাড়াই প্রদর্শিত হয়।
- ডিফল্ট ভ্যালু:
const exchangeRates = useSubscription(exchangeRatesSubscription) || {};-তে একটি খালি অবজেক্ট{}ডিফল্ট ভ্যালু হিসাবে প্রদান করা হয়েছে, যাতে রেট আনডিফাইন্ড হলে প্রাথমিক ত্রুটি প্রতিরোধ করা যায়।
- স্পষ্টতা:
- কোড এবং ব্যাখ্যাগুলি আরও সহজে বোঝার জন্য স্পষ্ট করা হয়েছে।
- গ্লোবাল API বিবেচনা:
- এই উদাহরণে exchangerate-api.com ব্যবহার করা হয়েছে যা বিশ্বব্যাপী অ্যাক্সেসযোগ্য হওয়া উচিত। সর্বদা যাচাই করুন যে এই জাতীয় উদাহরণগুলিতে ব্যবহৃত API গুলি বিশ্বব্যাপী দর্শকদের জন্য নির্ভরযোগ্য।
- API অনুপলব্ধ হলে বা ত্রুটি রিটার্ন করলে ব্যবহারকারীকে একটি ত্রুটির বার্তা প্রদর্শনের জন্য ত্রুটি হ্যান্ডলিং যোগ করার কথা বিবেচনা করুন।
- ইন্টারভাল কনফিগারেশন:
- API-কে অনুরোধের চাপে অভিভূত না করার জন্য ইন্টারভালটি ৬০ সেকেন্ড (৬০০০০ মিলিসেকেন্ড) সেট করা হয়েছে।
এই উদাহরণে:
fetchExchangeRatesAPI থেকে সর্বশেষ এক্সচেঞ্জ রেট ফেচ করে।exchangeRatesSubscriptionসাবস্ক্রিপশনের জন্যgetCurrentValueএবংsubscribeমেথড প্রদান করে।getCurrentValueবর্তমান এক্সচেঞ্জ রেট ফেচ করে এবং রিটার্ন করে।subscribeপর্যায়ক্রমে (প্রতি ৬০ সেকেন্ডে) রেট ফেচ করার জন্য একটি ইন্টারভাল সেট আপ করে এবং একটি রি-রেন্ডার ট্রিগার করার জন্য কলব্যাকটি কল করে।CurrencyConverterকম্পোনেন্টটি সর্বশেষ এক্সচেঞ্জ রেট পেতে এবং রূপান্তরিত পরিমাণ প্রদর্শন করতেuseSubscriptionব্যবহার করে।
প্রোডাকশনের জন্য গুরুত্বপূর্ণ বিবেচ্য বিষয়:
- ত্রুটি হ্যান্ডলিং: API ব্যর্থতা এবং নেটওয়ার্ক সমস্যাগুলি সুন্দরভাবে পরিচালনা করার জন্য শক্তিশালী ত্রুটি হ্যান্ডলিং বাস্তবায়ন করুন। ব্যবহারকারীকে তথ্যপূর্ণ ত্রুটির বার্তা প্রদর্শন করুন।
- রেট লিমিটিং: API রেট লিমিট সম্পর্কে সচেতন থাকুন এবং সেগুলি অতিক্রম করা এড়াতে কৌশল প্রয়োগ করুন (যেমন, ক্যাশিং, এক্সপোনেনশিয়াল ব্যাকঅফ)।
- API নির্ভরযোগ্যতা: সঠিক এবং আপ-টু-ডেট এক্সচেঞ্জ রেটের জন্য একটি নির্ভরযোগ্য এবং নামকরা API প্রদানকারী বেছে নিন।
- কারেন্সি কভারেজ: নিশ্চিত করুন যে API আপনার প্রয়োজনীয় কারেন্সিগুলির জন্য কভারেজ প্রদান করে।
- ব্যবহারকারীর অভিজ্ঞতা: ডেটা ফেচিং এবং UI আপডেট অপ্টিমাইজ করে একটি মসৃণ এবং প্রতিক্রিয়াশীল ব্যবহারকারীর অভিজ্ঞতা প্রদান করুন।
৪. Zustand স্টেট ম্যানেজমেন্ট
```javascript import React from 'react'; import { create } from 'zustand'; import { experimental_useSubscription as useSubscription } from 'react'; // Create a Zustand store const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); // Create a custom subscription object for Zustand const zustandSubscription = (store) => ({ getCurrentValue: () => store.getState(), subscribe: (callback) => { const unsubscribe = store.subscribe(callback); return unsubscribe; }, }); function ZustandComponent() { const store = useStore; const subscription = zustandSubscription(store); const state = useSubscription(subscription); return (experimental_useSubscription ব্যবহারের সেরা অনুশীলন
isEqualঅপ্টিমাইজ করুন: যদি আপনার ডেটা জটিল হয়, অপ্রয়োজনীয় রি-রেন্ডার প্রতিরোধ করতে একটি কাস্টমisEqualফাংশন প্রদান করুন। সাধারণ অবজেক্টের জন্য একটি শ্যালো তুলনা প্রায়শই যথেষ্ট, যেখানে আরও জটিল ডেটা স্ট্রাকচারের জন্য গভীর তুলনার প্রয়োজন হতে পারে।- ত্রুটিগুলি সুন্দরভাবে পরিচালনা করুন: সাবস্ক্রিপশন তৈরি বা ডেটা ফেচিংয়ের সময় ঘটতে পারে এমন যেকোনো ত্রুটি ধরতে এবং পরিচালনা করতে ত্রুটি হ্যান্ডলিং বাস্তবায়ন করুন।
- আনমাউন্টে আনসাবস্ক্রাইব করুন: মেমরি লিক প্রতিরোধ করতে কম্পোনেন্ট আনমাউন্ট হওয়ার সময় ডেটা সোর্স থেকে আনসাবস্ক্রাইব করা নিশ্চিত করুন।
subscribeফাংশনটিকে একটি আনসাবস্ক্রাইব ফাংশন রিটার্ন করা উচিত যা কম্পোনেন্ট আনমাউন্ট হওয়ার সময় কল করা হয়। - মেমোাইজেশন ব্যবহার করুন:
experimental_useSubscriptionব্যবহার করে এমন কম্পোনেন্টগুলির পারফরম্যান্স অপ্টিমাইজ করতে মেমোাইজেশন কৌশল (যেমন,React.memo,useMemo) ব্যবহার করুন। - পরীক্ষামূলক প্রকৃতি বিবেচনা করুন: মনে রাখবেন যে এই API পরীক্ষামূলক এবং পরিবর্তিত হতে পারে। ভবিষ্যতে React সংস্করণগুলিতে API পরিবর্তিত হলে আপনার কোড আপডেট করার জন্য প্রস্তুত থাকুন।
- পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: আপনার সাবস্ক্রিপশনগুলি সঠিকভাবে কাজ করছে এবং আপনার কম্পোনেন্টগুলি প্রত্যাশিতভাবে আপডেট হচ্ছে কিনা তা নিশ্চিত করতে ইউনিট পরীক্ষা এবং ইন্টিগ্রেশন পরীক্ষা লিখুন।
- পারফরম্যান্স নিরীক্ষণ করুন: আপনার কম্পোনেন্টগুলির পারফরম্যান্স নিরীক্ষণ করতে এবং যেকোনো সম্ভাব্য বাধা চিহ্নিত করতে React DevTools ব্যবহার করুন।
সম্ভাব্য চ্যালেঞ্জ এবং বিবেচ্য বিষয়
- পরীক্ষামূলক স্ট্যাটাস: API টি পরীক্ষামূলক এবং পরিবর্তনের সাপেক্ষ। এর জন্য ভবিষ্যতে কোড আপডেটের প্রয়োজন হতে পারে।
- জটিলতা: কাস্টম সাবস্ক্রিপশন বাস্তবায়ন করা জটিল হতে পারে, বিশেষ করে জটিল ডেটা সোর্সের জন্য।
- পারফরম্যান্স ওভারহেড: ভুলভাবে প্রয়োগ করা সাবস্ক্রিপশন অপ্রয়োজনীয় রি-রেন্ডারের কারণে পারফরম্যান্স ওভারহেডের কারণ হতে পারে।
isEqual-এর প্রতি সতর্ক মনোযোগ দেওয়া অত্যন্ত গুরুত্বপূর্ণ। - ডিবাগিং: সাবস্ক্রিপশন-সম্পর্কিত সমস্যা ডিবাগ করা চ্যালেঞ্জিং হতে পারে। সমস্যা চিহ্নিত করতে এবং সমাধান করতে React DevTools এবং কনসোল লগিং ব্যবহার করুন।
experimental_useSubscription-এর বিকল্প
আপনি যদি একটি পরীক্ষামূলক API ব্যবহার করতে স্বাচ্ছন্দ্যবোধ না করেন, অথবা যদি আপনার সাবস্ক্রিপশন ব্যবস্থাপনার উপর আরও নিয়ন্ত্রণের প্রয়োজন হয়, তবে নিম্নলিখিত বিকল্পগুলি বিবেচনা করুন:
- ম্যানুয়াল সাবস্ক্রিপশন ম্যানেজমেন্ট:
useEffectএবংuseStateব্যবহার করে ম্যানুয়ালি সাবস্ক্রিপশন ম্যানেজমেন্ট বাস্তবায়ন করুন। এটি আপনাকে সম্পূর্ণ নিয়ন্ত্রণ দেয় তবে আরও বয়লারপ্লেট কোডের প্রয়োজন হয়। - থার্ড-পার্টি লাইব্রেরি: সাবস্ক্রিপশন পরিচালনার জন্য RxJS বা MobX-এর মতো থার্ড-পার্টি লাইব্রেরি ব্যবহার করুন। এই লাইব্রেরিগুলি শক্তিশালী এবং নমনীয় সাবস্ক্রিপশন ম্যানেজমেন্ট ক্ষমতা প্রদান করে।
- React Query/SWR: ডেটা ফেচিংয়ের ক্ষেত্রে, React Query বা SWR-এর মতো লাইব্রেরি ব্যবহার করার কথা বিবেচনা করুন, যা ক্যাশিং, রিভ্যালিডেশন এবং ব্যাকগ্রাউন্ড আপডেটের জন্য বিল্ট-ইন সমর্থন প্রদান করে।
উপসংহার
React-এর experimental_useSubscription হুক এক্সটার্নাল ডেটা সোর্সে সাবস্ক্রিপশন পরিচালনা করার একটি শক্তিশালী এবং কার্যকর উপায় প্রদান করে। সাবস্ক্রিপশন ম্যানেজমেন্টকে সহজ করে এবং UI আপডেটগুলিকে স্বয়ংক্রিয় করে, এটি ডেভেলপমেন্টের অভিজ্ঞতা এবং অ্যাপ্লিকেশনের পারফরম্যান্সকে উল্লেখযোগ্যভাবে উন্নত করতে পারে। তবে, API-এর পরীক্ষামূলক প্রকৃতি এবং সম্ভাব্য চ্যালেঞ্জ সম্পর্কে সচেতন থাকা গুরুত্বপূর্ণ। এই গাইডে বর্ণিত সেরা অনুশীলনগুলি অনুসরণ করে, আপনি প্রতিক্রিয়াশীল এবং ডেটা-চালিত React অ্যাপ্লিকেশন তৈরি করতে কার্যকরভাবে experimental_useSubscription ব্যবহার করতে পারেন।
experimental_useSubscription গ্রহণ করার আগে আপনার নির্দিষ্ট প্রয়োজনগুলি সাবধানে মূল্যায়ন করতে এবং বিকল্পগুলি বিবেচনা করতে মনে রাখবেন। আপনি যদি সম্ভাব্য ঝুঁকি এবং সুবিধাগুলির সাথে স্বাচ্ছন্দ্যবোধ করেন, তবে এটি আপনার React ডেভেলপমেন্ট অস্ত্রাগারে একটি মূল্যবান টুল হতে পারে। সর্বদা সবচেয়ে আপ-টু-ডেট তথ্য এবং নির্দেশনার জন্য অফিসিয়াল React ডকুমেন্টেশন দেখুন।