کاهش نویز در Next.js

استفاده از useEffect برای Debouncing در Next.js

React v16.8 هوکی جدید به نام useEffect را معرفی کرد که به شما اجازه می‌دهد تا عوارض جانبی را در مؤلفه‌های عملکردی خود اجرا کنید. useEffect یک راه عالی برای رسیدگی به عملیات گران‌قیمت مانند تماس‌های API است، اما می‌تواند کمی کار نیاز داشته باشد. در این پست، به شما نشان می‌دهم که چگونه از useEffect برای debounce کردن رویه‌های گران‌قیمت در Next.js استفاده کنید.

Debouncing چیست؟

Debouncing یک تکنیک برای کنترل نرخ فراخوانی یک تابع است. این روش مفید است زمانی که شما یک عملیات گران‌قیمت دارید که فقط می‌خواهید زمانی اجرا شود که کاربر مثلاً تایپ کردن را متوقف کرده است. در این حالت، می‌توانید تماس API را debounce کنید تا فقط زمانی که کاربر برای مدت معینی تایپ کردن را متوقف کرده است، انجام شود.

useEffect

useEffect یک هوک است که به شما اجازه می‌دهد تا عوارض جانبی را در مؤلفه‌های عملکردی خود اجرا کنید. این مشابه componentDidMount و componentDidUpdate در مؤلفه‌های کلاس است. آرگومان اول یک تابع است که هنگام نصب یا به‌روزرسانی مؤلفه فراخوانی می‌شود. آرگومان دوم یک آرایه از وابستگی‌ها است. اگر وابستگی‌ها تغییر کنند، رویه دوباره فراخوانی خواهد شد. اگر آرایه خالی باشد، این تابع فقط زمانی فراخوانی می‌شود که مؤلفه نصب شود.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('این هنگام نصب مؤلفه فراخوانی می‌شود')
  }, [])

  useEffect(() => {
    console.log('این هنگام نصب مؤلفه و زمانی که وابستگی‌ها تغییر می‌کنند، فراخوانی می‌شود')
  }, [dependency1, dependency2])

  return <div>سلام دنیا</div>
}

چگونگی debounce کردن در Next.js

اولین کاری که باید انجام دهید، ایجاد یک هوک سفارشی است که debounce کردن را مدیریت کند. در اینجا یک مثال ساده آورده شده است:

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 شود و تأخیر به میلی ثانیه. این مقدار debounce شده را برمی‌گرداند. این هوک از useEffect برای تنظیم یک تایمر استفاده می‌کند که پس از تأخیر مشخص شده، مقدار debounce شده را به‌روزرسانی می‌کند. همچنین یک تابع پاکسازی تولید می‌کند که تایمر را اگر مقدار یا عدم اطمینان تغییر کند، پاک می‌کند.

اکنون که یک هوک داریم که می‌تواند مقادیر را debounce کند، می‌توانیم از آن برای debounce کردن تماس‌های API استفاده کنیم. در اینجا یک مثال آورده شده است:

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 به /api/search انجام خواهد داد. debounce تماس API را با مقدار فیلد ورودی به عنوان رشته پرس و جو انجام خواهد داد.

عملکرد

Debouncing یک روش ارزان برای رسیدگی به عملیات گران‌قیمت در Next.js است. این روش ارزان‌تر از استفاده از کتابخانه‌ای مانند lodash.debounce است زیرا به هیچ وابستگی اضافی نیازی ندارد. همچنین مقرون‌به‌صرفه‌تر از استفاده از کتابخانه‌ای مانند react-throttle است زیرا به هیچ کد اضافی برای بسته‌بندی شدن نیاز ندارد.

نتیجه‌گیری

Debouncing یک تکنیک ارزشمند برای کنترل نرخ فراخوانی یک تابع است. این روش مفید است زمانی که شما یک عملیات گران‌قیمت دارید که فقط می‌خواهید زمانی اجرا شود که کاربر مثلاً تایپ کردن را متوقف کرده است. در این پست، به شما نشان دادم که چگونه از useEffect برای debounce کردن عملیات گران‌قیمت در Next.js استفاده کنید.

اگر از این پست لذت بردید، ممکن است از JavaScript Hashmap, Performant and Simple نیز لذت ببرید.