Усулҳои коҳиш додани хароҷоти ҳисоббарорӣ дар Next.js

Чӣ тавр истифода бурдани хуки useEffect барои пешгирӣ аз иҷрои вазифаҳои гарон дар Next.js

React v16.8 хуке нав бо номи useEffect -ро ҷорӣ кард, ки ба шумо имкон медиҳад таъсироти ҷонибиро дар компонентҳои функсионалии худ иҷро кунед. useEffect як роҳи хуби идоракунии амалиётҳои гарон, ба монанди даъватҳои API аст, аммо ин метавонад баъзе корҳоро талаб кунад. Дар ин мақола, ман ба шумо нишон медиҳам, ки чӣ тавр истифода бурдани useEffect барои пешгирӣ аз иҷрои вазифаҳои гарон дар Next.js.

Пешгирӣ чист?

Пешгирӣ як техника барои назорат кардани суръати даъвати функсия мебошад. Ин ҳангоме ки шумо амалиёти гароне доред, ки танҳо мехоҳед онро вақте ки корбар ба навиштан бас кардааст, иҷро кунед, муфид аст. Масалан, дар ин ҳолат, шумо метавонед даъвати API -ро пешгирӣ кунед, то ки танҳо вақте ки корбар барои муддати муайян ба навиштан бас кардааст, анҷом дода шавад.

useEffect

useEffect як хукест, ки ба шумо имкон медиҳад таъсироти ҷонибиро дар компонентҳои функсионалии худ иҷро кунед. Ин ба componentDidMount ва componentDidUpdate дар компонентҳои синфӣ шабоҳат дорад. Аргументи аввал як функсияест, ки ҳангоми насб ё навсозии компонент даъват карда мешавад. Аргументи дуюм як маҷмӯи вобастагиҳо мебошад. Агар вобастагиҳо тағир ёбанд, процедура дубора даъват карда мешавад. Агар маҷмӯа холӣ бошад, функсия танҳо ҳангоми насби компонент даъват карда мешавад.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Ин ҳангоми насби компонент даъват карда мешавад')
  }, [])

  useEffect(() => {
    console.log('Ин ҳангоми насби компонент ва вақте ки вобастагиҳо тағир ёбанд, даъват карда мешавад')
  }, [dependency1, dependency2])

  return <div>Салом ҷаҳон</div>
}

Чӣ тавр пешгирӣ кардан дар Next.js

Аввалин чизе, ки шумо бояд анҷом диҳед, ин аст, ки хуки махсусе эҷод кунед, ки пешгирӣ карданро идора кунад. Ин як мисоли оддӣ аст:

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
}

Ин хук ду аргумент мегирад: арзише, ки бояд пешгирӣ карда шавад ва таъхир ба миллисония. Ин арзиши пешгиришударо бармегардонад. Хук аз useEffect барои муқаррар кардани муддате истифода мебарад, ки арзиши пешгиришударо пас аз таъхири муайяншуда навсозӣ мекунад. Инчунин як функсияи тозакуниро тавлид мекунад, ки муддат вақте ки арзиш ё номуайянии тағир меёбад, тоза мекунад.

Ҳоло ки мо хуке дорем, ки метавонад арзишҳоро пешгирӣ кунад, мо метавонем онро барои пешгирӣ аз даъватҳои 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 мекунад. Пешгирӣ даъвати API -ро бо арзиши майдони ворид кардашуда ҳамчун раги занҷири савол мекунад.

Иҷроиш

Пешгирӣ як роҳи арзон барои идоракунии амалиётҳои гарон дар Next.js аст. Ин аз истифодаи китобхонае ба монанди lodash.debounce арзонтар аст, зеро он ба ҳеҷ гуна вобастагии иловагӣ ниёз надорад. Инчунин аз истифодаи китобхонае ба монанди react-throttle арзонтар аст, зеро ба ҳеҷ гуна коди иловагӣ, ки бояд баста шавад, ниёз надорад.

Хулоса

Пешгирӣ як техникаи муфид барои назорат кардани суръати даъвати функсия аст. Ин ҳангоме ки шумо амалиёти гароне доред, ки мехоҳед танҳо вақте ки корбар ба навиштан бас кардааст, иҷро кунед, муфид аст. Дар ин мақола, ман ба шумо нишон додам, ки чӣ тавр истифода бурдани useEffect барои пешгирӣ аз амалиётҳои гарон дар Next.js.

Агар шумо аз ин мақола лаззат бурда бошед, шумо шояд аз JavaScript Hashmap, Performant and Simple низ лаззат баред.