Sida loo yareeyo kharashyada xisaabinta ee Next.js

Side Effects La Isticmaalka useEffect ee Next.js

React v16.8 waxay soo saartay hook cusub oo lagu magacaabo useEffect, kaas oo kuu oggolaanaya inaad ku shaqeyso saameynayaasha dhinacaaga qaybahaaga shaqaynaya. useEffect waa hab fiican oo lagu maareeyo howlaha qaali ah sida wicitaanka API-ga, laakiin waxay qaadan kartaa shaqo. Qoraalkan, waxaan ku tusayaa sida loo isticmaalo useEffect si looga fogaado nidaamyada qaali ah ee Next.js.

Waa maxay debouncing?

Debouncing waa farsamo lagu xakameynayo xawaaraha loogu yeedho shaqada. Waa mid faa'iido leh markaad haysato hawl qaali ah oo aad rabto inaad ku shaqeyso kaliya markay isticmaaluhu joojiyo qorista, tusaale ahaan. Kiiskan, waxaad ku dejisan kartaa wicitaanka API-ga si loo sameeyo marka kaliya isticmaaluhu joojiyo qorista muddo gaar ah.

useEffect

useEffect waa hook kuu oggolaanaya inaad ku shaqeyso saameynayaasha dhinacaaga qaybahaaga shaqaynaya. Waxay la mid tahay componentDidMount iyo componentDidUpdate ee qaybaha fasalka. Argumentiga ugu horreeya waa shaqo loogu yeedho marka qaybtu soo baxdo ama la cusboonaysiiyo. Argumentiga labaad waa shaybaarka ku tiirsanaanta. Haddii ku tiirsanaanta ay isbeddelaan, nidaamka ayaa mar kale loogu yeedhi doonaa. Haddii shaybaarku yahay mid madhan, shaqadu waxay kaliya loogu yeedhi doonaa marka qaybtu soo baxdo.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Tani waxay loo yeedhi doonaa marka qaybtu soo baxdo')
  }, [])

  useEffect(() => {
    console.log('Tani waxay loo yeedhi doonaa marka qaybtu soo baxdo iyo marka ku tiirsanaanta ay isbeddelaan')
  }, [dependency1, dependency2])

  return <div>Hello world</div>
}

Sida looga fogaado Next.js

Waxa ugu horreeya ee aad u baahan tahay inaad sameyso waa inaad abuurto hook caado ah oo maareyn doona debouncing-ka. Halkan waxaa ah tusaale fudud:

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
}

Hookkani waxay qaadanaysaa laba argumenti: qiimaha laga fogaanayo iyo dib u dhaca milisekon. Waxay soo celisaa qiimaha debounced. Hook-ku wuxuu isticmaalayaa useEffect si loo dejiyo waqti-dheer oo cusbooneysiin doona qiimaha debounced ka dib dib-u-dhaca la cayimay. Waxay sidoo kale soo saartaa shaqo nadiifin ah oo nadiifisa waqti-dheerka haddii qiimaha ama shaki la'aantu isbeddelaan.

Hadda oo aan haysano hook oo qiimaha laga fogaan karo, waxaan isticmaali karnaa si looga fogaado wicitaanka API-ga. Halkan waxaa ah tusaale:

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)} />
}

Qaybtani waxay samayn doontaa wicitaan API ah oo ku socda /api/search marka isticmaaluhu joojiyo qorista 500 milisekon. Debounce-ku waxay samayn doontaa wicitaanka API-ga oo leh qiimaha beerta gelinta sida xargaha baaritaanka.

Waxqabadka

Debouncing waa hab jaban oo lagu maareeyo howlaha qaali ah ee Next.js. Waa mid ka jaban isticmaalka maktabad sida lodash.debounce sababtoo ah ma u baahna wax ku tiirsanaan dheeri ah. Waxay sidoo kale ka jaban tahay isticmaalka maktabad sida react-throttle sababtoo ah ma u baahna wax kood dheeri ah oo la isku geeyo.

Gunaanad

Debouncing waa farsamo qiimo leh oo lagu xakameynayo xawaaraha loogu yeedho shaqada. Waa mid faa'iido leh markaad haysato hawl qaali ah oo aad rabto inaad ku shaqeyso kaliya markay isticmaaluhu joojiyo qorista. Qoraalkan, waxaan ku tusay sida loo isticmaalo useEffect si looga fogaado howlaha qaali ah ee Next.js.

Haddii aad ka heshay qoraalkan, waxaa laga yaabaa inaad sidoo kale jeceshahay JavaScript Hashmap, Performant and Simple.