كيفاش ننقصو مصاريف حساب Next.js

ايو كت ؤ ديبونسينغ ؤ ستعمالو ؤ فيكت ؤ فينيكست.دجيس:

كت ؤ ديبونسينغ؟

دبونسينغ هو طريقة لِتْحْكُمْ فِـ نُّظُومْ تَنْفِيْدِ ؤَظِيفَةْ. ؤ ھْذِ ّْطْرِيقَةْ ّْفِْيدَةْ لِـ دَاخِلْ ؤَظِيفَةْ ّْغَالِيَةْ، ّْفِْحَالَةْ ّْنْبْغِيْ ّْنْشْغُلْ ّْفِيْ ّْحَالَةْ ّْوَقْفِ ّْتْكَتِيبْ ّْأُوْ ّْفِيْ ّْحَالَةْ ّْاْخْرِىْ. ّْفِْ ّْحَالَةْ ّْهَذِ ّْنْقْدُرْ ّْنْدَبوُنْ ّْدْعْوَةْ ّْأَبي ّْفِيْ ّْحَالَةْ ّْوَقْفِ ّْتْكَتِيبْ ّْلِـ ّْفَتْرَةْ ّْزْمَانِيةْ ّْمُحَدّدَةْ.

يوِفيكتْ

يوِفيكتْ هو ّْرِيقَةْ ّْفِيْ ّْرِياكتْ ّْفِْ ّْسِمْ ّْهُ ّْرِيقَةْ ّْفِْ ّْتَشْغِيلِ ّْالْأْثَارْ ّْجانِبِيةْ ّْفِيْ ّْمُرَكَبَاتْ ّْدَالَةْ. ّْھْذِ ّْرِيقَةْ ّْشْبِهْ ّْكُمْبَونَنتْ ّْدالَةْ ّْكَتْبِ ّْفِيْ ّْكَلاَسْ. ّْأَوّلْ ّْحِجَةْ ّْهِيَ ّْدَالَةْ ّْتْشْغُلْ ّْفِيْ ّْحَالَةْ ّْتْشْكِلِ ّْأُوْ ّْتْحْدِيْدِ ّْمُرَكَبْ. ّْثَانِ ّْحِجَةْ ّْهِيَ ّْجَمَعَةْ ّْتَوَاعُدْ. ّْفِيْ ّْحَالَةْ ّْتْغِيِرِ ّْتَوَاعُدْ، ّْتْشْغُلْ ّْدَالَةْ ّْثَانِ ّْمَرةْ. ّْفِيْ ّْحَالَةْ ّْفَارْغِ ّْجَمَعَةْ، ّْتْشْغُلْ ّْدَالَةْ ّْفِيْ ّْحَالَةْ ّْتْشْكِلِ ّْمُرَكَبْ ّْفَقَطْ.

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

ّْكِيْفَاشْ ّْنْدَبوُنْ ّْفِيْ ّْنِكْست.دجيس

أَوّلْ ّْحَاجَةْ ّْنْبْغِيْ ّْنْدِيْرُها ّْهِيَ ّْتْخْلِيْقْ ّْرِيقَةْ ّْمُؤْتْمَنَةْ ّْتْحْكُمْ ّْفِيْ ّْدبونسينغ. ّْهْنَا ّْمَثَالْ ّْبَسِيطْ:

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
}

ّْهْذِ ّْرِيقَةْ ّْتْأْخُذْ ّْجُوجْ ّْحُجَجْ: ّْقِيمَةْ ّْلِـ ّْدبونسينغ ّْوُ ّْتْأْخِيْرْ ّْبِـ ّْمِلّي ّْثَانِيَةْ. ّْتْرْجَعْ ّْقِيمَةْ ّْمْدَبُونْ. ّْتْسْتْغُلْ ّْرِيقَةْ ّْيوِفيكتْ ّْلِـ ّْضْبْطِ ّْوَقْتْ ّْتْحْدِيدْ ّْتْعْدِيلْ ّْقِيمَةْ ّْمْدَبُونْ ّْبِـ ّْعَدَ ّْتْأْخِيْرْ ّْمُحَدّدْ. ّْتْسْتْغُلْ ّْكْذَا ّْدَالَةْ ّْتَنْظِيْفْ ّْتْشْرِحْ ّْوَقْتْ ّْتْحْدِيدْ ّْفِيْ ّْحَالَةْ ّْتْغِيِرِ ّْقِيمَةْ ّْأُوْ ّْتْأْكِيدْ.

ّْدابَا ّْعْنْدَنَا ّْرِيقَةْ ّْتْقْدُرْ ّْتْدبونْ ّْقِيمَاتْ، ّْنْقْدُرْ ّْنْسْتْغُلُها ّْلِـ ّْتْدبونْ ّْدْعْوَاتْ ّْأَبي. ّْهْنَا ّْمَثَالْ:

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

ّْھْذِ ّْمُرَكَبْ ّْتْدِيرْ ّْدْعْوَةْ ّْأَبي ّْلِـ ّْ/api/search ّْفِيْ ّْحَالَةْ ّْوَقْفِ ّْتْكَتِيبْ ّْلِـ ّْ500 ّْمِلّي ّْثَانِيَةْ. ّْتْدبونْ ّْتْدِيرْ ّْدْعْوَةْ ّْأَبي ّْبِـ ّْقِيمَةْ ّْحَقُولْ ّْتْدْخِيلْ ّْكِمَثَالْ ّْسْتْخْدَامْ ّْسِطْرْ ّْسْؤَالْ.

ّْأْدَاءْ

دبونسينغ ّْهِيَ ّْطْرِيقَةْ ّْرْخِيصَةْ ّْلِـ ّْتْحْكُمْ ّْفِيْ ّْأْعْمَالِ ّْغَالِيَةْ ّْفِيْ ّْنِكْست.دجيس. ّْهِيَ ّْأْرْخَصْ ّْمِنْ ّْسْتْخْدَامْ ّْمَكتَبَةْ ّْكِمَثَالْ ّْlodash.debounce ّْحِيْتْ ّْمَا ّْتْحْتَاجْ ّْشْ ّْوَلاَ ّْتَوَاعُدْ ّْزِيَادَةْ. ّْهِيَ ّْكْذَا ّْأْرْخَصْ ّْمِنْ ّْسْتْخْدَامْ ّْمَكتَبَةْ ّْكِمَثَالْ ّْreact-throttle ّْحِيْتْ ّْمَا ّْتْحْتَاجْ ّْشْ ّْوَلاَ ّْكُودْ ّْزِيَادَةْ ّْلِـ ّْتْكْدِيْسْ.

ّْخْتِمَامْ

دبونسينغ ّْهِيَ ّْتْقْنِيَةْ ّْفِْيدَةْ ّْلِـ ّْتْحْكُمْ ّْفِيْ ّْنُّظُومْ ّْتَنْفِيْدِ ّْأْوَظِيفَةْ. ّْھْذِ ّْتْقْنِيَةْ ّْفِْيدَةْ ّْفِيْ ّْحَالَةْ ّْعْنْدْكْ ّْأْوَظِيفَةْ ّْغَالِيَةْ ّْتْبْغِيْ ّْتْشْغُلْ ّْفَقَطْ ّْفِيْ ّْحَالَةْ ّْوَقْفِ ّْتْكَتِيبْ. ّْفِيْ ّْهْذِ ّْمُنْشُورْ، ّْوْرِيْتْكْ ّْكِيْفَاشْ ّْتْسْتْغُلْ ّْيوِفيكتْ ّْلِـ ّْتْدبونْ ّْأْعْمَالِ ّْغَالِيَةْ ّْفِيْ ّْنِكْست.دجيس.

ّْفِيْ ّْحَالَةْ ّْعْجْبْكْ ّْهْذِ ّْمُنْشُورْ، ّْمْكَانْ ّْعْجْبْكْ ّْكْذَا JavaScript Hashmap, Performant and Simple.