React Event Handling Guide
আপনি যখন কোনো বাটনে ক্লিক করেন তখন কি আপনার পুরো ওয়েব পেজটি রিলোড হয়ে যায়? টাইপ করার সময় আপনার ইনপুট বক্স কি স্টেট (state) আপডেট করতে ব্যর্থ হয়? আপনি যদি React-এ সঠিকভাবে ইভেন্ট হ্যান্ডেল না করেন, তবে আপনি এই সমস্যাগুলোর সম্মুখীন হতে পারেন।
ইভেন্ট হ্যান্ডলিং মানে হলো ক্লিক, সাবমিট বা পরিবর্তনের মতো ব্যবহারকারীর অ্যাকশনগুলো ক্যাপচার করা এবং সেগুলোর বিপরীতে প্রতিক্রিয়া জানানো। React SyntheticEvent নামক একটি সিস্টেম ব্যবহার করে। এটি নিশ্চিত করে যে আপনার কোড Chrome, Safari এবং Firefox-এর মতো সব ব্রাউজারে একইভাবে কাজ করবে।
HTML এবং React ইভেন্টের মধ্যে মূল পার্থক্যসমূহ:
- Naming: React-এ camelCase ব্যবহার করুন। onclick-এর পরিবর্তে onClick ব্যবহার করুন।
- Handlers: React-এ একটি ফাংশন রেফারেন্স পাস করুন। স্ট্রিং-এর পরিবর্তে কার্লি ব্রেসেস ব্যবহার করুন।
- Prevention: ব্রাউজারের ডিফল্ট আচরণ বন্ধ করতে সর্বদা event.preventDefault() কল করুন।
React যেভাবে ইভেন্ট হ্যান্ডেল করে:
React প্রতিটি নোডে আলাদাভাবে লিসেনার যুক্ত করে না। এটি Event Delegation ব্যবহার করে। এটি রুট এলিমেন্টে একটি মাত্র লিসেনার যুক্ত করে। এটি মেমরি সাশ্রয় করে এবং পারফরম্যান্স উন্নত করে।
ব্যবহারের জন্য সাধারণ প্যাটার্নসমূহ:
- Click Counter: ব্যবহারকারী যখন কোনো বাটনে ক্লিক করেন তখন স্টেট আপডেট করতে একটি ফাংশন ব্যবহার করুন।
- Form Handling: একটি ফাংশনের মাধ্যমে একাধিক ইনপুট ফিল্ড আপডেট করতে event.target.name এবং event.target.value ব্যবহার করুন। পেজ রিলোড বন্ধ করতে ফর্ম সাবমিশনের সময় সর্বদা event.preventDefault() ব্যবহার করুন।
- Passing Arguments: যদি আপনাকে কোনো ফাংশনে একটি ID পাস করতে হয়, তবে একটি অ্যারো ফাংশন ব্যবহার করুন। onClick={() => handleDelete(id)} এভাবে লিখুন। onClick={handleDelete(id)} লিখবেন না, কারণ এটি রেন্ডারের সময় সাথে সাথে রান হয়ে যায়।
এই ভুলগুলো এড়িয়ে চলুন:
- Infinite Loops: onClick অ্যাট্রিবিউটে সরাসরি কোনো ফাংশন কল করবেন না। এটি রেন্ডারের সময় একটি স্টেট আপডেট ট্রিগার করে, যা আবার নতুন করে রেন্ডার ঘটায়।
- Undefined Events: যদি আপনার preventDefault() কল করার প্রয়োজন হয়, তবে আপনার ফাংশন ডেফিনিশনে সর্বদা event প্যারামিটারটি অন্তর্ভুক্ত করুন।
- Memory Leaks: আপনি যদি useEffect হুকের মধ্যে window.addEventListener-এর মতো ম্যানুয়াল লিসেনার যোগ করেন, তবে সর্বদা ক্লিনআপ ফাংশনে সেগুলো রিমুভ করে দিন।
পারফরম্যান্সের জন্য সেরা অনুশীলনসমূহ:
- আপনার লিস্ট যদি অনেক বড় হয়, তবে .map() লুপের ভেতরে নতুন ফাংশন তৈরি করা এড়িয়ে চলুন।
- চাইল্ড কম্পোনেন্টে হ্যান্ডলার পাস করার সময় useCallback হুক ব্যবহার করুন।
- আপনার অ্যাপ দ্রুত রাখতে কাস্টম ইভেন্ট লিসেনারগুলো ক্লিনআপ করুন।
ইভেন্টে দক্ষ হওয়া হলো ইন্টারঅ্যাক্টিভ React অ্যাপ্লিকেশন তৈরির মূল চাবিকাঠি।
Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69