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

React v16.8 کې د `useEffect` هوک او د Next.js کې د ګرانو عملیاتو د "Debouncing" لپاره یې کارول

React v16.8 د useEffect په نوم یو نوی هوک معرفي کړ، کوم چې تاسو ته اجازه درکوي چې په خپلو فعالیتونو (Functional) برخو کې "Side Effects" اجرا کړئ. useEffect د ګرانو عملیاتو، لکه API غوښتنو، اداره کولو لپاره یوه ښه لاره ده، خو کیدای شي ځینې کارونه هم واخلي. په دې پوسټ کې، زه به تاسو ته وښیم چې څنګه د Next.js کې د "Debouncing" لپاره د useEffect څخه ګټه واخلئ.

Debouncing څه شی دی؟

"Debouncing" یوه تکنیک ده چې د کومې فنکشن د بلولو سرعت کنټرولولو لپاره کارول کیږي. دا په هغه وخت کې ګټور دی کله چې تاسو یو ګران عمل لرئ چې تاسو یوازې غواړئ هغه وخت اجرا کړئ کله چې کاروونکی د ټایپ کولو څخه ودریږي، د مثال په توګه. په دې حالت کې، تاسو کولی شئ API غوښتنه "Debounce" کړئ ترڅو یوازې هغه وخت ترسره شي کله چې کاروونکی د ځانګړي وخت لپاره د ټایپ کولو څخه ودریږي.

useEffect

useEffect یو هوک دی چې تاسو ته اجازه درکوي چې په خپلو فعالیتونو (Functional) برخو کې "Side Effects" اجرا کړئ. دا د کلاس برخو کې د componentDidMount او componentDidUpdate سره ورته دی. لومړی دلیل یو فنکشن دی چې کله برخه "Mount" کیږي یا تازه کیږي، بلېږي. دوهم دلیل د انحصارو (Dependencies) یوه لړۍ ده. که چیرې انحصارونه بدلون ومومي، پروسیجر به بیا بلېږي. که چیرې لړۍ تشه وي، فنکشن به یوازې هغه وخت بلېږي کله چې برخه "Mount" کیږي.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('دا به هغه وخت بلېږي کله چې برخه "Mount" کیږي')
  }, [])

  useEffect(() => {
    console.log('دا به هغه وخت بلېږي کله چې برخه "Mount" کیږي او کله چې انحصارونه بدلون ومومي')
  }, [dependency1, dependency2])

  return <div>سلام نړۍ</div>
}

په Next.js کې د "Debouncing" څرنګوالی

لومړی شی چې تاسو یې باید وکړئ دا ده چې د "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 څخه کار اخلي چې د وخت محدودیت (Timeout) تنظیم کړي چې د ټاکل شوي وخت څخه وروسته د "Debounced" ارزښت تازه کړي. دا هم د پاکولو فنکشن تولیدوي چې که چیرې ارزښت یا ناڅاپه بدلون ومومي، د وخت محدودیت (Timeout) څرګندوي.

اوس چې موږ یو هوک لرو چې کولی شي ارزښتونه "Debounce" کړي، موږ کولی شو د API غوښتنو د "Debouncing" لپاره یې وکاروو. دلته یوه بیلګه ده:

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 غوښتنه وکړي.

کارکردګي

"Debouncing" په Next.js کې د ګرانو عملیاتو اداره کولو لپاره یوه ارزانه لاره ده. دا د lodash.debounce په څیر کتابتون څخه ارزانه ده ځکه چې دا هیڅ اضافي انحصار ته اړتیا نلري. دا د react-throttle په څیر کتابتون څخه هم ارزانه ده ځکه چې دا د کوم اضافي کوډ چې بند کړي شي، ته اړتیا نلري.

پایله

"Debouncing" یوه ګټوره تکنیک ده چې د کومې فنکشن د بلولو سرعت کنټرولولو لپاره کارول کیږي. دا په هغه وخت کې ګټور دی کله چې تاسو یو ګران عمل لرئ چې تاسو یوازې غواړئ هغه وخت اجرا کړئ کله چې کاروونکی د ټایپ کولو څخه ودریږي. په دې پوسټ کې، زه تاسو ته وښیم چې څنګه د Next.js کې د useEffect څخه کار اخلي چې د ګرانو عملیاتو "Debounce" کړي.

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

React v16.8 کې د useEffect هوک او د Next.js کې د ګرانو عملیاتو د "Debouncing" لپاره یې کارول