Suppression du bruit dans Next.js

Débogage dans Next.js avec useEffect

React v16.8 a introduit un nouveau hook appelé useEffect, qui vous permet d'exécuter des effets secondaires dans vos composants fonctionnels. useEffect est un excellent moyen de gérer les opérations coûteuses comme les appels API, mais cela peut demander un certain travail. Dans cet article, je vais vous montrer comment utiliser useEffect pour déboguer des procédures coûteuses dans Next.js.

Qu'est-ce que le débogage ?

Le débogage est une technique permettant de contrôler la fréquence à laquelle une fonction est appelée. Elle est utile lorsque vous avez une opération coûteuse que vous souhaitez exécuter uniquement lorsque l'utilisateur a fini de taper, par exemple. Dans ce cas, vous pouvez déboguer l'appel API afin qu'il ne soit effectué que lorsque l'utilisateur a cessé de taper pendant un certain temps.

useEffect

useEffect est un hook qui vous permet d'exécuter des effets secondaires dans vos composants fonctionnels. Il est similaire à componentDidMount et componentDidUpdate dans les composants de classe. Le premier argument est une fonction appelée lorsque le composant est monté ou mis à jour. Le deuxième argument est un tableau de dépendances. Si les dépendances changent, la procédure sera appelée à nouveau. Si le tableau est vide, la fonction ne sera appelée que lorsque le composant sera monté.

import React, { useEffect } from 'react'

const MyComponent = () => {
  useEffect(() => {
    console.log('Ceci sera appelé lorsque le composant est monté')
  }, [])

  useEffect(() => {
    console.log('Ceci sera appelé lorsque le composant est monté et lorsque les dépendances changent')
  }, [dependency1, dependency2])

  return <div>Bonjour le monde</div>
}

Comment déboguer dans Next.js

La première chose à faire est de créer un hook personnalisé qui gérera le débogage. Voici un exemple simple :

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
}

Ce hook prend deux arguments : la valeur à déboguer et le délai en millisecondes. Il renvoie la valeur déboguée. Le hook utilise useEffect pour définir un délai qui mettra à jour la valeur déboguée après le délai spécifié. Il produit également une fonction de nettoyage qui efface le délai si la valeur ou l'incertitude change.

Maintenant que nous avons un hook qui peut déboguer des valeurs, nous pouvons l'utiliser pour déboguer les appels API. Voici un exemple :

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

Ce composant effectuera un appel API à /api/search chaque fois que l'utilisateur cesse de taper pendant 500 millisecondes. Le débogage effectuera l'appel API avec la valeur du champ de saisie comme chaîne de requête.

Performance

Le débogage est un moyen peu coûteux de gérer les opérations coûteuses dans Next.js. Il est moins cher que d'utiliser une bibliothèque comme lodash.debounce car il ne nécessite aucune dépendance supplémentaire. Il est également plus abordable que d'utiliser une bibliothèque comme react-throttle car il ne nécessite aucun code supplémentaire à regrouper.

Conclusion

Le débogage est une technique précieuse pour contrôler la fréquence à laquelle une fonction est appelée. Il est pratique lorsque vous avez une opération coûteuse que vous souhaitez exécuter uniquement lorsque l'utilisateur a fini de taper. Dans cet article, je vous ai montré comment utiliser useEffect pour déboguer des opérations coûteuses dans Next.js.

Si cet article vous a plu, vous aimerez peut-être aussi JavaScript Hashmap, Performant and Simple.