إزالة الضوضاء في Next.js

استخدام useEffect لِتخفيض العمليات مكلفة في Next.js

قدم React الإصدار 16.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>Hello world</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)} />
}

سيُجري هذا المُكون مُكالمة API إلى /api/search كلما يكفُّ المُستخدم عن الكِتابة لِمدة 500 ميلِ ثانية . سيُجري التخفيض مُكالمة API مع قيمة حقل الإدخال كَسلسلة استعلام .

الأداء

التخفيض هو طريقة رخيصة لِتُعامِل العمليات المكلفة في Next.js . إنه أرخص من استخدام مكتبة مثل lodash.debounce لأنها لا تتطلب أي اعتماديات إضافية . كما إنه أرخص من استخدام مكتبة مثل react-throttle لأنها لا تتطلب أي رمز إضافي لِتُضمّن .

الخاتمة

التخفيض هو أسلوب مُفيد لِتحكم في مُعدّل تُستدعى بِه دالة . إنه مُفيد عندما تُواجه عملية مكلفة ترغب بِتنفيذها فقط عندما يكفُّ المُستخدم عن الكِتابة . في هذا المنشور ، أُوضحت لكَ كيفية استخدام useEffect لِتخفيض العمليات المكلفة في Next.js .

إذا استمتعت بهذا المنشور ، فَربما تُعجبكَ JavaScript Hashmap, Performant and Simple أيضًا .