JavaScript এবং React এ Debounce ব্যবহার সম্পর্কে বিস্তারিত আলোচনা

JavaScript এবং React-এ debounce একটি কৌশল, যা কোনো ফাংশনের দ্রুত পুনরাবৃত্তি বন্ধ করে নির্দিষ্ট সময় পর ফাংশনটি চালায়। এটি মূলত পারফরম্যান্স উন্নত করার জন্য ব্যবহৃত হয়, বিশেষ করে যখন ব্যবহারকারী টাইপিং বা স্ক্রোলিং এর মতো কাজ করে।

Debounce কীভাবে কাজ করে?

Debounce মুলতঃ একটি টাইমার তৈরি করে এবং নির্দিষ্ট সময়ের মধ্যে যদি একই কাজ বারবার ট্রিগার হয়, তাহলে এটি শেষ ফাংশনটি চালু করার আগে বাকি ফাংশনগুলোকে বাতিল করে। উদাহরণস্বরূপ, সার্চ বক্সে টাইপিংয়ের সময় একটি সার্ভারে API কল করতে গেলে প্রতিটি কী প্রেসে সার্ভারে কল না করে, একবার টাইপিং শেষ হলে নির্দিষ্ট সময় পরে API কল করা যায়। এতে সার্ভারের লোড কমে এবং অ্যাপ্লিকেশনের পারফরম্যান্স বাড়ে।

JavaScript-এ Debounce কিভাবে তৈরি করা যায়?

Debounce ফাংশন তৈরি করা খুব সহজ:

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

উপরে debounce ফাংশনটি নিচের কাজগুলো করে:

• func: যে ফাংশনটি ডিবাউন্স করা হবে।
• delay: কতক্ষণ অপেক্ষা করার পর ফাংশনটি চালু হবে।

উদাহরণ

ধরুন আমরা একটি সার্চ বক্সে API কল করতে চাই, যখন ব্যবহারকারী টাইপিং শেষ করে:

function handleSearch(query) {
    console.log("Searching for:", query);
    // এখানে API কল হবে
}

const debouncedSearch = debounce(handleSearch, 500); // 500ms delay

// Input field এ টাইপ করার সাথে সাথে debounce ফাংশন কাজ করবে
document.getElementById('searchInput').addEventListener('input', function(event) {
    debouncedSearch(event.target.value);
});

এখানে debouncedSearch ফাংশনটি ৫০০ মিলিসেকেন্ড অপেক্ষা করবে, তারপর ফাংশনটি কল করবে, যাতে একাধিক কী প্রেসের ফলে সার্ভারে একাধিক অনুরোধ না যায়।

React-এ Debounce কিভাবে ব্যবহার করা যায়?

React অ্যাপ্লিকেশনে, debounce ফাংশন সাধারণত useEffect হুকের সাথে ব্যবহার করা হয়। উদাহরণ:

import React, { useState, useEffect } from 'react';

function SearchComponent() {
    const [query, setQuery] = useState('');
    const [debouncedQuery, setDebouncedQuery] = useState(query);

    // useEffect to handle debounced query update
    useEffect(() => {
        const timer = setTimeout(() => {
            setDebouncedQuery(query);
        }, 500); // 500ms delay

        // Cleanup the timeout when query changes
        return () => {
            clearTimeout(timer);
        };
    }, [query]);

    useEffect(() => {
        if (debouncedQuery) {
            console.log("Searching for:", debouncedQuery);
            // এখানে API কল হবে
        }
    }, [debouncedQuery]);

    return (
        <input 
            type="text" 
            value={query}
            onChange={(e) => setQuery(e.target.value)} 
            placeholder="Search..."
        />
    );
}

export default SearchComponent;

এই উদাহরণে, query স্টেট ব্যবহারকারী যখন টাইপ করে তখন সাথে সাথে আপডেট হয়। কিন্তু debouncedQuery স্টেটটি শুধুমাত্র ৫০০ মিলিসেকেন্ড পরে আপডেট হয়, যখন ব্যবহারকারী টাইপ করা বন্ধ করে। ফলে API কল একাধিকবার না হয়ে শুধুমাত্র প্রয়োজনীয় সময়ে হয়।

উপসংহার

Debounce কৌশলটি JavaScript এবং React-এ পারফরম্যান্স উন্নত করার জন্য একটি কার্যকরী উপায়। এটি বিশেষভাবে সার্চ ইঞ্জিন, ফর্ম ভ্যালিডেশন এবং স্ক্রোল ইভেন্টগুলোর ক্ষেত্রে গুরুত্বপূর্ণ, যেখানে ইভেন্টগুলোর উপর অপ্রয়োজনীয় একাধিক কল করা থেকে বিরত থাকা দরকার।