{"id":76527,"date":"2024-03-13T12:12:54","date_gmt":"2024-03-13T11:12:54","guid":{"rendered":"https:\/\/kinqsta.com\/fr\/?p=76527&post_type=knowledgebase&preview_id=76527"},"modified":"2025-10-01T20:42:23","modified_gmt":"2025-10-01T19:42:23","slug":"react-hook-useeffect-has-a-missing-dependency","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/react-hook-useeffect-has-a-missing-dependency\/","title":{"rendered":"Comment corriger l’erreur \u00ab Le hook React useEffect a une d\u00e9pendance manquante \u00bb"},"content":{"rendered":"

Le hook React<\/a> useEffect<\/code> est devenu une fonctionnalit\u00e9 populaire de la biblioth\u00e8que React<\/a> depuis son introduction dans la version 16.8. Il permet aux d\u00e9veloppeurs d’effectuer des effets de bord tels que la r\u00e9cup\u00e9ration de donn\u00e9es<\/a>, la mise \u00e0 jour du DOM et l’abonnement \u00e0 des \u00e9v\u00e8nements \u00e0 l’int\u00e9rieur de composants fonctionnels.<\/p>\n

Cependant, l’utilisation du hook useEffect<\/code> peut parfois s’av\u00e9rer d\u00e9licate. Une erreur courante que les d\u00e9veloppeurs rencontrent est la suivante : \u00ab Le hook React useEffect a une d\u00e9pendance manquante. Int\u00e9grez-la ou supprimez le tableau de d\u00e9pendances \u00bb.<\/p>\n

Dans cet article, nous allons discuter des causes de cette erreur et fournir diverses solutions pour la corriger.
\n

<\/div><\/kinsta-auto-toc><\/p>\n

Quelles sont les causes de l’erreur \u00ab React Hook useEffect Has a Missing Dependency \u00bb ?<\/h2>\n

L’erreur \u00ab Le hook React useEffect a une d\u00e9pendance manquante \u00bb se produit lorsque le Hook useEffect<\/code> a un tableau de d\u00e9pendances incomplet ou manquant.<\/p>\n

Le tableau de d\u00e9pendance est le deuxi\u00e8me argument du hook useEffect<\/code> et est utilis\u00e9 pour sp\u00e9cifier les variables dont d\u00e9pend l’effet. Cela signifie que lorsque l’une des valeurs des variables sp\u00e9cifi\u00e9es dans le tableau de d\u00e9pendance change, l’effet est r\u00e9-ex\u00e9cut\u00e9.<\/p>\n

Dans le cas o\u00f9 une variable dont d\u00e9pend l’effet n’est pas incluse dans le tableau de d\u00e9pendance, l’effet peut ne pas \u00eatre r\u00e9-ex\u00e9cut\u00e9 lorsque la valeur change. Cela peut entrainer un comportement inattendu et des bogues dans votre application.<\/p>\n

Cette erreur n’est pas une erreur React mais une erreur ESLint. ESLint<\/a> fournit une extension sp\u00e9cifique pour React, qui inclut un ensemble de r\u00e8gles con\u00e7ues pour aider les d\u00e9veloppeurs \u00e0 \u00e9crire un meilleur code React. L’une de ces r\u00e8gles est la r\u00e8gle \"react-hooks\/exhaustive-deps\"<\/code>, qui d\u00e9tecte l’erreur \u00ab Le hook React useEffect a une d\u00e9pendance manquante \u00bb.<\/p>\n

Prenons l’exemple d’un composant fonctionnel qui poss\u00e8de un \u00e9tat de comptage. Ce composant est \u00e9galement cens\u00e9 enregistrer un message avec la valeur de count<\/code> dans la console chaque fois qu’il change :<\/p>\n

import { useState, useEffect } from 'react';\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    console.log(`You clicked ${count} times`);\n  }, []);\n\n  return (\n    <div>\n      <h1>Hello World<\/h1>\n      <p>Count: {count}<\/p>\n      <button onClick={() => setCount(count + 1)}>Increment<\/button>\n    <\/div>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
Dans l’exemple ci-dessus, vous avez un composant fonctionnel qui utilise les crochets useState<\/code> et useEffect<\/code>. Le crochet useEffect<\/code> est utilis\u00e9 pour enregistrer un message avec la valeur de la variable d’\u00e9tat count<\/code> chaque fois qu’elle change.<\/p>\n
Cependant, remarquez que la variable count<\/code> n’est pas list\u00e9e dans le second tableau d’arguments (tableau de d\u00e9pendances) du hook useEffect<\/code>. Cela d\u00e9clenchera l’erreur \u00ab Le hook React useEffect a une d\u00e9pendance manquante \u00bb.<\/p>\n
\"Message
Message d’erreur \u00ab\u00a0React Hook useEffect has a missing dependency\u00a0\u00bb (Le crochet React useEffect a une d\u00e9pendance manquante)<\/figcaption><\/figure>\n
3 fa\u00e7ons de corriger l’erreur \u00ab\u00a0React Hook useEffect Has a Missing Dependency\u00a0\u00bb (Le crochet React useEffect a une d\u00e9pendance manquante)<\/h2>\n
Cette erreur peut \u00eatre corrig\u00e9e de diff\u00e9rentes mani\u00e8res en fonction de l’approche que vous souhaitez utiliser. Voici les diff\u00e9rentes mani\u00e8res.<\/p>\n