په Next.js کې د شور کمول

Debouncing د Next.js کې د useEffect سره

React v16.8 د useEffect نومې نوي hook وړاندې کړه چې تاسو ته اجازه درکوي په functional components کې side effects اجرا کړئ. useEffect د expensive operations ، لکه API calls ، اداره کولو لپاره یو ښه طریقه ده ، خو د کار کولو لپاره یې ځینې کارونه ته اړتیا لري. په دې پوسټ کې ، زه به تاسو ته وښیم چې څنګه د Next.js کې expensive procedures debounce کولو لپاره useEffect کاروئ.

Debouncing څه شی دی؟

Debouncing یو تکنیک دی چې د یو function د اجرا کیدو نرخ کنټرول کوي. دا حل کله چې تاسو expensive operation لرئ ، چې یوازې کله چې کاروونکی ټایپ کول ودروي، اجرا کول غواړئ، سودمند دی. په دې حالت کې ، تاسو کولی شئ API call debounce کړئ تر څو چې یوازې کله چې کاروونکی د یو محدود وخت لپاره ټایپ کول ودروي، اجرا شي.

useEffect

useEffect یو hook دی چې تاسو ته په functional components کې side effects اجرا کولو اجازه درکوي. دا د class components کې componentDidMount او componentDidUpdate سره ورته دی. لومړی argument یو function دی چې کله چې component mount یا update شي، اجرا کېږي. دوهم argument یو array د dependencies دی. که dependencies بدلون موندلی ، function بیا اجرا کېږي. که array خالي وي، function یوازې کله چې component mount شي، اجرا کېږي.

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 کړو

لومړی کار چې تاسو ته اړتیا لري دا دی چې یو custom hook جوړ کړئ چې 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
}

دا hook دو argument اخلي: value چې debounce شي او delay په milliseconds کې. دا debounced value راګرځوي. hook د useEffect کار اخلي چې یو timeout ټاکي چې د ټاکل شوي delay وروسته debounced value update کړي. دا هم یو cleanup function رامنځته کوي چې timeout ناکامه کړي که value یا uncertainty بدلون موندلی.

اوس چې موږ یو hook لرئ چې values debounce کولی شي، موږ کولی شو چې د API calls 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)} />
}

دا component کله چې کاروونکی د 500 milliseconds لپاره ټایپ کول ودروي، یو API call ته /api/search کوي. debounce به د input field د value په توګه د query string سره API call کوي.

Performance

Debouncing یو ارزان طریقه ده چې په Next.js کې expensive operations اداره کړي. دا د lodash.debounce لکه library کارولو څخه ارزان دی ځکه چې دا ته هیچ extra dependency ته اړتیا نه لري. دا هم د react-throttle لکه library کارولو څخه ارزان دی ځکه چې دا ته هیچ additional code ته اړتیا نه لري چې bundled شي.

Conclusion

Debouncing یو مهم تکنیک دی چې د یو function د اجرا کیدو نرخ کنټرول کوي. دا کله چې تاسو expensive operation لرئ چې یوازې کله چې کاروونکی ټایپ کول ودروي ، اجرا کول غواړئ ، سودمند دی. په دې پوسټ کې ، زه تاسو ته وښودل چې څنګه د Next.js کې expensive operations debounce کولو لپاره useEffect کاروئ.

که تاسو د دې پوسټ څخه خوند اخیستل ، تاسو ښایي JavaScript Hashmap, Performant and Simple هم وګورئ.