{"id":70256,"date":"2023-06-22T08:57:11","date_gmt":"2023-06-22T07:57:11","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=70256&post_type=knowledgebase&preview_id=70256"},"modified":"2025-10-01T20:42:40","modified_gmt":"2025-10-01T19:42:40","slug":"react-useeffect","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/react-useeffect\/","title":{"rendered":"D\u00e9mystifier le hook useEffect de React"},"content":{"rendered":"

React<\/a> est l’une des biblioth\u00e8ques JavaScript<\/a> les plus populaires pour la construction d’interfaces utilisateur. Lors de la construction de ces interfaces, vous pouvez avoir besoin d’effectuer des effets de bord, tels que la r\u00e9cup\u00e9ration de donn\u00e9es \u00e0 partir d’une API<\/a>, l’abonnement \u00e0 des \u00e9v\u00e9nements ou la manipulation du DOM.<\/p>\n

C’est l\u00e0 que le puissant hook useEffect<\/code> entre en jeu. Il vous permet de g\u00e9rer ces effets secondaires de mani\u00e8re transparente, d\u00e9clarative et efficace, en veillant \u00e0 ce que votre interface utilisateur reste responsive et \u00e0 jour.<\/p>\n

Que vous soyez un nouveau venu dans React ou un d\u00e9veloppeur<\/a> exp\u00e9riment\u00e9, il est essentiel de comprendre et de ma\u00eetriser useEffect<\/code> pour cr\u00e9er des applications robustes et dynamiques. Dans cet article, vous apprendrez comment fonctionne le hook useEffect<\/code> et comment l’utiliser dans votre projet React.
\n

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

Qu’est-ce que l’effet de bord dans React ?<\/h2>\n

Lorsque vous travaillez avec des composants React, il arrive que vous ayez besoin d’interagir avec des entit\u00e9s ou d’effectuer des actions en dehors de la port\u00e9e de React. Ces interactions externes sont connues sous le nom d’effets de bord<\/strong>.<\/p>\n

Dans React, la plupart des composants sont des fonctions pures, ce qui signifie qu’ils re\u00e7oivent des entr\u00e9es (props) et produisent des sorties pr\u00e9visibles (JSX), comme le montre l’exemple ci-dessous :<\/p>\n

export default function App() {\n  return <User userName=\"JaneDoe\" \/>   \n}\n  \nfunction User(props) {\n  return <h1>{props.userName}<\/h1>; \/\/ John Doe\n}<\/code><\/pre>\n
Cependant, les effets secondaires ne sont pas pr\u00e9visibles car ils impliquent des interactions en dehors du champ d’application habituel de React.<\/p>\n
Prenons un exemple o\u00f9 vous souhaitez modifier dynamiquement le titre de l’onglet du navigateur pour afficher l’adresse userName<\/code> de l’utilisateur. Bien qu’il puisse \u00eatre tentant de le faire directement dans le composant, ce n’est pas l’approche recommand\u00e9e car cela est consid\u00e9r\u00e9 comme un effet de bord :<\/p>\n
const User = ({ userName }) => {\n  document.title = `Hello ${userName}`; \/\/ \u274cNever do this in the component body \u2014 It is a side effect.\n\n  return <h1>{userName}<\/h1>;\n}<\/code><\/pre>\n
L’ex\u00e9cution d’effets de bord directement dans le corps du composant peut interf\u00e9rer avec le processus de rendu de notre composant React.<\/p>\n
Pour \u00e9viter toute interf\u00e9rence, vous devez s\u00e9parer les effets secondaires de mani\u00e8re \u00e0 ce qu’ils ne rendent ou ne fonctionnent qu’apr\u00e8s le rendu de notre composant, ce qui garantit une s\u00e9paration claire entre le processus de rendu et toutes les interactions externes n\u00e9cessaires. Cette s\u00e9paration est r\u00e9alis\u00e9e \u00e0 l’aide du hook useEffect<\/code>.<\/p>\n
Comprendre les principes de base de useEffect<\/h2>\n
Le hook useEffect<\/code> est con\u00e7u pour imiter les m\u00e9thodes de cycle de vie telles que componentDidMount<\/code>, componentDidUpdate<\/code> et componentWillUnmount<\/code> que l’on trouve dans les composants de classe.<\/p>\n
Pour utiliser useEffect<\/code>, vous devez l’importer depuis \u00ab react \u00bb et l’appeler dans un composant<\/a> de fonction (au niveau sup\u00e9rieur du composant). Elle prend deux arguments : une fonction de rappel et un tableau de d\u00e9pendances facultatif.<\/p>\n
useEffect(callbackFn, [dependencies]);<\/code><\/pre>\n
Cela peut \u00eatre mieux \u00e9crit comme suit :<\/p>\n
useEffect(() => {\n  \/\/ code to run when the effect is triggered\n}, [dependencies]);<\/code><\/pre>\n