Mënyra efektive për të zvogëluar shpenzimet e llogaritjes në Next.js

Si efektet anësore në komponentët funksionalë me useEffect në Next.js

React v16.8 prezantoi një hook të ri të quajtur useEffect, i cili ju lejon të ekzekutoni efekte anësore në komponentët tuaj funksionalë. useEffect është një mënyrë e shkëlqyer për të trajtuar operacionet e shtrenjta si thirrjet e API-së, por mund të kërkojë disa punë. Në këtë postim, do t'ju tregoj se si të përdorni useEffect për të shmangur procedurat e shtrenjta në Next.js.

Çfarë është shmangia?

Shmangia është një teknikë për kontrollin e shpejtësisë me të cilën thirret një funksion. Është e dobishme kur keni një operacion të shtrenjtë që dëshironi të ekzekutoni vetëm kur përdoruesi ka ndaluar shkrimin, për shembull. Në këtë rast, mund të shmangni thirrjen e API-së në mënyrë që të bëhet vetëm kur përdoruesi ka ndaluar shkrimin për një sasi të caktuar kohe.

useEffect

useEffect është një hook që ju lejon të ekzekutoni efekte anësore në komponentët tuaj funksionalë. Është i ngjashëm me componentDidMount dhe componentDidUpdate në komponentët e klasave. Argumenti i parë është një funksion që thirret kur komponenti montohet ose azhurnohet. Argumenti i dytë është një masiv i varësive. Nëse varësitë ndryshojnë, procedura do të thirret përsëri. Nëse masivi është bosh, funksioni do të thirret vetëm kur komponenti montohet.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Kjo do të thirret kur komponenti montohet')
  }, [])

  useEffect(() => {
    console.log('Kjo do të thirret kur komponenti montohet dhe kur varësitë ndryshojnë')
  }, [dependency1, dependency2])

  return <div>Mirëdita botë</div>
}

Si të shmangni në Next.js

Gjëja e parë që duhet të bëni është të krijoni një hook personalizuar që do të trajtojë shmangien. Ja një shembull i thjeshtë:

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
}

Ky hook merr dy argumente: vlera për shmangje dhe vonesa në milisekonda. Ai kthen vlerën e shmangur. Hooku përdor useEffect për të vendosur një vonesë që do të azhurnojë vlerën e shmangur pas vonesës së specifikuar. Ai gjithashtu prodhon një funksion pastrimi që pastron vonesën nëse vlera ose pasiguria ndryshon.

Tani që kemi një hook që mund të shmangë vlerat, mund ta përdorim atë për të shmangur thirrjet e API-së. Ja një shembull:

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

Ky komponent do të bëjë një thirrje API në /api/search çdo herë që përdoruesi ndalon shkrimin për 500 milisekonda. Shmangia do të bëjë thirrjen e API-së me vlerën e fushës së hyrjes si varg pyetjeje.

Performanca

Shmangia është një mënyrë e lirë për të trajtuar operacionet e shtrenjta në Next.js. Është më e lirë se përdorimi i një biblioteke si lodash.debounce sepse nuk kërkon varësi shtesë. Është gjithashtu më e lirë se përdorimi i një biblioteke si react-throttle sepse nuk kërkon kod shtesë për të qenë i bashkuar.

Përfundim

Shmangia është një teknikë e vlefshme për kontrollin e shpejtësisë me të cilën thirret një funksion. Është e dobishme kur keni një operacion të shtrenjtë që dëshironi të ekzekutoni vetëm kur përdoruesi ka ndaluar shkrimin. Në këtë postim, ju tregova se si të përdorni useEffect për të shmangur operacionet e shtrenjta në Next.js.

Nëse ju pëlqeu ky postim, ju mund të pëlqeni edhe JavaScript Hashmap, Performant dhe i Thjeshtë.