Next.js-এ কম্পিউটিং খরচ কমানোর কার্যকর পদ্ধতি

React-এর useEffect হুক ব্যবহার করে Next.js-তে কীভাবে দামি প্রক্রিয়াগুলিকে Debounce করা যায়

React v16.8 একটি নতুন হুক চালু করেছে, যার নাম useEffect, যা আপনাকে আপনার ফাংশনাল কম্পোনেন্টগুলিতে সাইড ইফেক্ট চালানোর অনুমতি দেয়। useEffect API কলের মতো দামি অপারেশন পরিচালনা করার জন্য একটি দুর্দান্ত উপায়, তবে এটি কিছু কাজ নিতে পারে। এই পোস্টে, আমি আপনাকে Next.js-তে দামি প্রক্রিয়াগুলিকে debounce করার জন্য useEffect কীভাবে ব্যবহার করবেন তা দেখাব।

Debouncing কী?

Debouncing হল একটি কৌশল যা একটি ফাংশন কতবার ডাকা হচ্ছে তার হার নিয়ন্ত্রণ করার জন্য ব্যবহৃত হয়। এটি তখনই কার্যকর হয় যখন আপনার কাছে একটি দামি অপারেশন থাকে যা আপনি শুধুমাত্র তখনই চালাতে চান যখন ব্যবহারকারী টাইপ করা বন্ধ করে, উদাহরণস্বরূপ। এই ক্ষেত্রে, আপনি API কলটি debounce করতে পারেন যাতে এটি শুধুমাত্র তখনই করা হয় যখন ব্যবহারকারী নির্দিষ্ট সময়ের জন্য টাইপ করা বন্ধ করে।

useEffect

useEffect হল একটি হুক যা আপনাকে আপনার ফাংশনাল কম্পোনেন্টগুলিতে সাইড ইফেক্ট চালানোর অনুমতি দেয়। এটি ক্লাস কম্পোনেন্টগুলিতে componentDidMount এবং componentDidUpdate এর মতো। প্রথম আর্গুমেন্ট একটি ফাংশন যা কম্পোনেন্ট মাউন্ট বা আপডেট হলে ডাকা হয়। দ্বিতীয় আর্গুমেন্ট নির্ভরতার একটি অ্যারে। যদি নির্ভরতা পরিবর্তিত হয়, তাহলে প্রক্রিয়াটি আবার ডাকা হবে। যদি অ্যারেটি খালি থাকে, তাহলে ফাংশনটি কেবল তখনই ডাকা হবে যখন কম্পোনেন্ট মাউন্ট হবে।

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('This will be called when the component mounts')
  }, [])

  useEffect(() => {
    console.log('This will be called when the component mounts and when the dependencies change')
  }, [dependency1, dependency2])

  return <div>Hello world</div>
}

Next.js-তে কীভাবে Debounce করবেন

আপনার প্রথম করণীয় হল Debouncing পরিচালনা করবে এমন একটি কাস্টম হুক তৈরি করা। এখানে একটি সহজ উদাহরণ:

import { useState, useEffect } from 'react'

export default function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)

    return () => {
      clearTimeout(handler)
    }
  }, [value, delay])

  return debouncedValue
}

এই হুকটি দুটি আর্গুমেন্ট গ্রহণ করে: debounce করার জন্য মান এবং মিলিসেকেন্ডে বিলম্ব। এটি debounced মান প্রদান করে। হুকটি useEffect ব্যবহার করে একটি টাইমআউট সেট করে যা নির্দিষ্ট বিলম্বের পরে debounced মানটি আপডেট করবে। এটি একটি পরিষ্কার ফাংশনও তৈরি করে যা মান বা নিশ্চয়তা পরিবর্তিত হলে টাইমআউটটি পরিষ্কার করে।

এখন আমরা যখন একটি হুক পেয়ে গেছি যা মানগুলি debounce করতে পারে, আমরা এটি API কলগুলি debounce করার জন্য ব্যবহার করতে পারি। এখানে একটি উদাহরণ:

import useDebounce from './useDebounce'

export default function Search() {
  const [search, setSearch] = useState('')
  const debouncedSearch = useDebounce(search, 500)

  useEffect(() => {
    if (debouncedSearch) {
      fetch(`/api/search?q=${debouncedSearch}`)
    }
  }, [debouncedSearch])

  return <input type="text" value={search} onChange={(e) => setSearch(e.target.value)} />
}

এই কম্পোনেন্টটি ব্যবহারকারী 500 মিলিসেকেন্ডের জন্য টাইপ করা বন্ধ করলেই /api/search -এ একটি API কল করবে। debounce ইনপুট ক্ষেত্রের মানটি কোয়েরি স্ট্রিং হিসাবে ব্যবহার করে API কলটি করবে।

পারফরম্যান্স

Next.js-তে দামি অপারেশন পরিচালনা করার জন্য Debouncing একটি সস্তা উপায়। lodash.debounce এর মতো একটি লাইব্রেরি ব্যবহার করার চেয়ে এটি সস্তা কারণ এটি কোনও অতিরিক্ত নির্ভরতা প্রয়োজন হয় না। react-throttle এর মতো একটি লাইব্রেরি ব্যবহার করার চেয়ে এটি আরও সাশ্রয়ীও কারণ এটি বান্ডেল করার জন্য কোনও অতিরিক্ত কোডের প্রয়োজন হয় না।

উপসংহার

Debouncing একটি ফাংশন কতবার ডাকা হচ্ছে তার হার নিয়ন্ত্রণ করার জন্য একটি মূল্যবান কৌশল। এটি তখনই কার্যকর হয় যখন আপনার কাছে একটি দামি অপারেশন থাকে যা আপনি শুধুমাত্র তখনই চালাতে চান যখন ব্যবহারকারী টাইপ করা বন্ধ করে। এই পোস্টে, আমি আপনাকে Next.js-তে দামি অপারেশনগুলিকে debounce করার জন্য useEffect কীভাবে ব্যবহার করবেন তা দেখিয়েছি।

যদি আপনি এই পোস্টটি উপভোগ করে থাকেন, তাহলে আপনার JavaScript Hashmap, Performant and Simple পোস্টটিও পছন্দ হতে পারে।