আপনি যদি একজন রিঅ্যাক্ট ডেভেলপার হন যিনি এখনও রিঅ্যাক্ট হুক সম্পর্কে না জেনে থাকেন, এখনই সেই মুহূর্ত। এই পোস্টটি বিস্তারিতভাবে ইফেক্ট রিঅ্যাক্ট হুকের মাধ্যমে যাবে। এটি একটি সুইস আর্মি ছুরির সমতুল্য হুক। এটি বিভিন্ন সমস্যার সমাধান করে, যেমন একটি কম্পোনেন্ট মাউন্ট হলে কীভাবে ডেটা পেতে হয়, স্টেট বা প্রপ পরিবর্তন হলে কীভাবে কোড চালাতে হয়, কীভাবে টাইমার বা ব্যবধান সেট আপ করতে হয় ইত্যাদি।
একটি ইউজইফেক্ট ব্যবহার করা হয় যা আপনি "করতে" চান এমন একটি প্রতিক্রিয়া উপাদানে যা JSX (কোন প্রকারের পার্শ্ব প্রতিক্রিয়া) ফেরত দেয় না। আপনার প্রতি কম্পোনেন্টের বেশ কিছু ইউজ ইফেক্ট থাকতে পারে।
এই সমস্ত শক্তি একটি খরচে আসে: যদি না আপনি বুঝতে পারেন এটি কিভাবে কাজ করে, এটি বিভ্রান্তিকর হতে পারে। এই পোস্টে, আমরা বিভিন্ন উদাহরণ দেখব যাতে আপনি ধারণাগত মডেলটি বুঝতে পারেন এবং এটি আপনার নিজের কোডে প্রয়োগ করতে পারেন।
প্রতিক্রিয়া হুকস - এটা কি সমাধান করার চেষ্টা করছে?
হুকগুলি প্রথমে রিঅ্যাক্ট সংস্করণ 16.8-এ চালু করা হয়েছিল এবং এখন অনেকগুলি প্রতিক্রিয়া প্রকল্প দ্বারা ব্যবহার করা হয়। হুক উপাদানগুলির মধ্যে কোড পুনরাবৃত্তির সমস্যাকে অতিক্রম করে। এগুলি ক্লাসের ব্যবহার ছাড়াই লেখা হয়। এটি বোঝায় না যে প্রতিক্রিয়া ক্লাস ত্যাগ করছে; হুকগুলি কেবল একটি বিকল্প পদ্ধতি।
প্রতিক্রিয়া আপনাকে রাষ্ট্রীয় যুক্তি দিয়ে দ্রুত পরিশীলিত উপাদান তৈরি করতে দেয়। ক্লাস রিঅ্যাক্ট লাইফসাইকেল পদ্ধতির উপর নির্ভর করে এই উপাদানগুলিকে আলাদা করা কঠিন। এখানেই প্রতিক্রিয়া হুক আসে।
তারা আপনাকে একটি উপাদানকে ছোট ফাংশনে ভাগ করার অনুমতি দেয়। লাইফসাইকেল পদ্ধতির উপর ভিত্তি করে কোডকে ছোট ছোট অংশে ভাগ করার পরিবর্তে, আপনি এখন কার্যকারিতার উপর নির্ভর করে ছোট ইউনিটে কোড সাজাতে এবং আলাদা করতে পারেন।
ইউজ ইফেক্ট হুক কি?
হুকগুলি এমন ফাংশন যা আপনাকে ES6 ক্লাস না লিখেই স্টেট এবং অন্যান্য প্রতিক্রিয়া ক্ষমতা অ্যাক্সেস করতে দেয়। রিঅ্যাক্ট হুকস এপিআইতে useEffect নামে একটি হুক আছে। আপনি যদি প্রতিক্রিয়াশীল জীবন চক্রের সাথে পরিচিত হন, তাহলে ইফেক্ট হুকের ব্যবহার একই উপাদানডিডমাউন্ট, উপাদানডিডআপ, এবং উপাদানউইলউনমઉન્ટ একত্রিত জীবন চক্র পদ্ধতি।
রিঅ্যাক্ট হুক্স ডকুমেন্টেশন অনুসারে, এটি ES6 ক্লাস কম্পোনেন্ট জীবন চক্র পদ্ধতির সাথে কিছু সমস্যা সমাধানের জন্য তৈরি করা হয়েছিল।
বাক্য গঠন
প্রথম আর্গুমেন্ট হল একটি কলব্যাক ফাংশন, যা প্রতিটি রেন্ডারের পরে ডিফল্টরূপে কার্যকর করা হয়। দ্বিতীয় প্যারামিটারটি হল একটি ঐচ্ছিক নির্ভরতা অ্যারে যা হুককে শুধুমাত্র টার্গেট স্টেট পরিবর্তিত হলেই কলব্যাক করার নির্দেশ দেয়।
দ্য হুক প্রতিটি নির্ভরতার ঐতিহাসিক এবং বর্তমান অবস্থার তুলনা করে। যদি দুটি মান মেলে না, হুক প্রথম প্যারামিটারে নির্দিষ্ট করা কলব্যাককে আহ্বান করে। নির্ভরতা অ্যারে স্বাভাবিক কলব্যাক আচরণকে পরিবর্তন করে এবং গ্যারান্টি দেয় যে হুক উপাদান সুযোগের অন্যান্য সমস্ত উপাদানকে উপেক্ষা করে।
মৌলিক ব্যবহার
একটি বার্তা সংরক্ষণ করতে, আমি উপরের কোড নমুনায় প্রতিক্রিয়া ব্যবহার স্টেট ব্যবহার করছি। এর পরে, আমি আমার বার্তা স্টেট ভেরিয়েবলটি নিয়েছি এবং এটি স্ক্রিনে প্রিন্ট করি। যাইহোক, আমি এখন কম্পোনেন্ট মাউন্ট করার পর এক সেকেন্ডের বার্তা পরিবর্তন করতে ইফেক্ট ব্যবহার করতে চাই।
আমি প্রতিক্রিয়া ফ্রেমওয়ার্ক থেকে useEffect আমদানি করার পরে useState লাইনের পিছনে আমার প্রভাব সন্নিবেশ করেছি। ইফেক্ট ব্যবহার করার জন্য প্রথম প্যারামিটারটি একটি ফাংশন। যখন এই ফাংশন হ্যান্ডলারটি কার্যকর করা হয়, তখন এটি আপনার দেওয়া যেকোনো পার্শ্বপ্রতিক্রিয়ার যত্ন নেবে। ফাংশনটি একটি কলব্যাক ফাংশন যাকে বলা হয় যখন প্রতিক্রিয়া উপাদান জীবনচক্রের ঘটনাগুলির মধ্যে একটি ঘটে।
কখন এটি ব্যবহার করবেন?
UseEffect হুক বিভিন্ন পরিস্থিতিতে উপযোগী হতে পারে। নিম্নলিখিতগুলি সবচেয়ে গুরুত্বপূর্ণ:
- যখন আমরা একটি সরবরাহকৃত যুক্তির উপর নির্ভর করে ডেটা আনতে চাই তখন আমরা ক্লায়েন্টের দিক থেকে এই প্যারামিটারটি পরিবর্তন করতে পারি। পরামিতি নতুন ডেটা সহ আপডেট করার পরে এটি প্রত্যাহার করা হবে।
- যদি আমরা একটি API এন্ডপয়েন্ট থেকে ডেটা পুনরুদ্ধার করতে এবং ক্লায়েন্ট-সাইডে প্রদর্শন করতে চাই। যখন আমাদের কম্পোনেন্ট রেন্ডার হয়, ইউজ ইফেক্ট হুকে দেওয়া ফাংশন বা হ্যান্ডলার কার্যকর করা হয় এবং কম্পোনেন্ট স্টেটের ডেটা পুনরুদ্ধার করা হয়। এই অবস্থাগুলি তারপর ব্যবহারকারী ইন্টারফেস উপাদান নিযুক্ত করা হয়.
- যখন আপনার উপাদানটি বাইরের বিশ্বের ডেটার উপর নির্ভর করে এবং আমরা নিশ্চিত করতে পারি না যে ডেটা আসবে, তখন আমাদের ইফেক্ট ব্যবহার করা উচিত (সম্ভবত সার্ভারটি ডাউন আছে)। সমস্যাগুলি ছুঁড়ে ফেলার পরিবর্তে এবং অন্যান্য উপাদানগুলিকে প্রদর্শিত হতে বাধা দেওয়ার পরিবর্তে, সেগুলিকে useEffect হুকে রাখুন৷
ব্যবহারের ক্ষেত্রে
যদি কম্পোনেন্টটি প্রথম রানের পরে পুনরায় রেন্ডার হয় তবে এটি কার্যকর হবে না।
যখনই একটি উপাদান রেন্ডার বা পুনরায় রেন্ডার হয়, এটি সর্বদা কার্যকর করা উচিত।
ডিফল্টরূপে, প্রোগ্রাম শুধুমাত্র একবার চলে। পরে, যদি প্রপ মান পরিবর্তন হয়, চালান:
অ্যাসিঙ্ক্রোনাস কার্যকলাপের জন্য, সর্বদা useEffect ব্যবহার করুন।
useEffect কোড ব্লকগুলি আপনার সহকর্মী বিকাশকারীদের জন্য অ্যাসিঙ্ক্রোনাস কাজের স্পষ্ট চিহ্নিতকারী। UseEffect ব্যবহার না করেই অ্যাসিঙ্ক্রোনাস কোড তৈরি করা সম্ভব, তবে এটি "প্রতিক্রিয়া পদ্ধতি" নয় এবং এটি জটিলতা এবং ভুলের ঝুঁকি উভয়ই বাড়ায়।
UI বন্ধ করতে পারে এমন অ্যাসিঙ্ক্রোনাস কোড লেখার পরিবর্তে useEffect ব্যবহার করা প্রতিক্রিয়া সম্প্রদায়ের একটি সুপরিচিত কৌশল, বিশেষ করে যেভাবে প্রতিক্রিয়া টিম এটিকে পার্শ্ব প্রতিক্রিয়া সম্পাদন করার জন্য তৈরি করেছে।
এটি ব্যবহার করার আরেকটি সুবিধা হল যে বিকাশকারীরা কেবল কোডটি পর্যালোচনা করতে পারে এবং অবিলম্বে "নিয়ন্ত্রণ প্রবাহের বাইরে" চালানো কোড সনাক্ত করতে পারে যা শুধুমাত্র প্রথম রেন্ডার চক্রের পরে গুরুত্বপূর্ণ হয়ে ওঠে। অধিকন্তু, ব্লকগুলি পুনঃব্যবহারযোগ্য এবং আরও বেশি শব্দার্থিক কাস্টম হুকগুলিতে নিষ্কাশনের জন্য উপযুক্ত।
একটি উদাহরণ
useEffect কোড ব্যবহার করে, প্রতি সেকেন্ডে একটি সংখ্যা বৃদ্ধি করুন।
উপসংহার
অন্তর্নিহিত নকশা নীতিগুলি এবং ব্যবহারের ইফেক্ট হুকের সর্বোত্তম অনুশীলনগুলি বোঝা, আমার দৃষ্টিতে, আপনি যদি পরবর্তী স্তরের প্রতিক্রিয়া বিকাশকারী হতে চান তবে এটি শেখার জন্য একটি গুরুত্বপূর্ণ দক্ষতা।
সংক্ষিপ্তভাবে বলতে গেলে, useEffect Hook একটি ফাংশন গ্রহণ করে যার মধ্যে অপরিহার্য, সম্ভাব্য প্রভাব সম্পূর্ণ যুক্তি রয়েছে। ডিপেন্ডেন্স অ্যারে, যা দ্বিতীয় প্যারামিটার, এক্সিকিউশনকে প্রভাবিত করতে ব্যবহার করা যেতে পারে। এটি মোকাবেলা করার সময়, রিটার্ন ফাংশন ব্যবহার করে ক্লিনিং কোড লিখতে হবে।
নিবন্ধটি সহায়ক হলে আমাদের মন্তব্যে জানান।
নির্দেশিকা সমন্ধে মতামত দিন