{"id":5944,"date":"2024-09-20T09:24:38","date_gmt":"2024-09-20T09:24:38","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/eviter-actualisation-inutile-composant-react\/"},"modified":"2024-09-20T09:24:43","modified_gmt":"2024-09-20T09:24:43","slug":"eviter-actualisation-inutile-composant-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/eviter-actualisation-inutile-composant-react\/","title":{"rendered":"4.3 \u00c9viter l&rsquo;Actualisation Inutile d&rsquo;un Composant en React"},"content":{"rendered":"\n<p><strong>\u00c9viter l&rsquo;Actualisation Inutile d&rsquo;un Composant en React<\/strong> est une pratique essentielle pour optimiser les performances et garantir une exp\u00e9rience utilisateur fluide. Cette technique permet d&rsquo;\u00e9viter le rendu inutile de composants qui n&rsquo;ont pas subi de changement, \u00e9conomisant ainsi des ressources et am\u00e9liorant l&rsquo;efficacit\u00e9 de votre application. Apprenons comment cela fonctionne et comment l&rsquo;impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 l&rsquo;\u00c9vitation d&rsquo;Actualisation Inutile en React<\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/706059550?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>En React, chaque actualisation de l&rsquo;application implique un processus costaud de reconciliation pour d\u00e9terminer ce qui a chang\u00e9 dans le DOM virtuel et pour en appliquer les modifications minimales n\u00e9cessaires au DOM r\u00e9el. Une actualisation inutile de composants qui ne n\u00e9cessitent pas de changement peut entrainer des ralentissements et une augmentation de la consommation de ressources. \u00c9viter ces actualisations inutiles est donc crucial pour maintenir une application r\u00e9active et performante.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser shouldComponentUpdate pour Contr\u00f4ler l&rsquo;Actualisation des Composants de Classe<\/h3>\n\n\n\n<p>Dans les composants de classe, la m\u00e9thode shouldComponentUpdate() permet de sp\u00e9cifier si un composant doit \u00eatre mis \u00e0 jour en fonction des nouvelles props ou state. Par d\u00e9faut, tous les composants se mettent \u00e0 jour lorsque les props ou l&rsquo;\u00e9tat changent, mais si shouldComponentUpdate renvoie false, l&rsquo;actualisation est \u00e9vit\u00e9e.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class MyComponent extends React.Component {\n  shouldComponentUpdate(nextProps, nextState) {\n    if (this.props.value !== nextProps.value) {\n      return true; \/\/ Actualiser uniquement si la prop 'value' a chang\u00e9\n    }\n    return false; \/\/ Sinon, ne pas actualiser\n  }\n\n  render() {\n    return <div>{this.props.value}<\/div>;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser React.memo pour Les Composants Fonctionnels<\/h3>\n\n\n\n<p>Pour les composants fonctionnels, React fournit le hook React.memo qui m\u00e9morise le r\u00e9sultat d&rsquo;un composant et ne le re-rend que si ses props changent. C&rsquo;est une alternative pr\u00e9f\u00e9r\u00e9e aux composants de classe et \u00e0 shouldComponentUpdate pour les composants fonctionnels.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const MyComponent = React.memo(({ value }) => {\n  return <div>{value}<\/div>;\n}, (prevProps, nextProps) => {\n  return prevProps.value === nextProps.value;\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser PureComponent pour Simplifier l&rsquo;Optimisation dans les Composants de Classe<\/h3>\n\n\n\n<p>PureComponent est une classe de base similaire \u00e0 Component, mais qui impl\u00e9mente une version superficielle de shouldComponentUpdate. Elle compare les props et l&rsquo;\u00e9tat, et n&rsquo;actualise le composant que si les nouvelles props ou l&rsquo;\u00e9tat sont diff\u00e9rents des anciens.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>class MyComponent extends React.PureComponent {\n  render() {\n    return <div>{this.props.value}<\/div>;\n  }\n}\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9viter les Actualisations Inutiles avec les Hooks useMemo et useCallback<\/h3>\n\n\n\n<p>Les hooks useMemo et useCallback peuvent \u00eatre utilis\u00e9s pour m\u00e9moriser des valeurs ou des fonctions, respectivement, afin de pr\u00e9venir des calculs ou des rendus inutiles. <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener noreferrer\">useMemo<\/a> m\u00e9morise une valeur entre les rendus tant que les d\u00e9pendances ne changent pas, et <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\" target=\"_blank\" rel=\"noopener noreferrer\">useCallback<\/a> fait de m\u00eame pour les fonctions.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useMemo, useCallback } from 'react';\n\nconst MyComponent = ({ value, onClick }) => {\n  const memoizedValue = useMemo(() => {\n    return value * 2; \/\/ Calculer uniquement si 'value' change\n  }, [value]);\n\n  const memoizedCallback = useCallback(() => {\n    console.log(value); \/\/ Cr\u00e9er une fonction uniquement si 'value' change\n  }, [value]);\n\n  return (\n    <div>\n      <div>{memoizedValue}<\/div>\n      <button onClick={memoizedCallback}>Click Me<\/button>\n    <\/div>\n  );\n};\n\nexport default React.memo(MyComponent);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser React.lazy et Suspense pour Le Chargement de Composants Asynchrones<\/h3>\n\n\n\n<p>Pour am\u00e9liorer encore plus les performances, <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\" target=\"_blank\" rel=\"noopener noreferrer\">React.lazy<\/a> et Suspense permettent de charger les composants de mani\u00e8re asynchrone. Cela divise votre code en paquets plus petits qui sont charg\u00e9s uniquement lorsqu&rsquo;ils sont n\u00e9cessaires, r\u00e9duisant ainsi le temps de chargement initial de l&rsquo;application.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { Suspense } from 'react';\n\nconst LazyComponent = React.lazy(() => import('.\/LazyComponent'));\n\nconst MyComponent = () => {\n  return (\n    <Suspense fallback={<div>Loading...<\/div>}>\n      <LazyComponent \/>\n    <\/Suspense>\n  );\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser le Hook useMemo pour Optimiser Les Composants Complexes<\/h3>\n\n\n\n<p>Le hook useMemo peut \u00e9galement \u00eatre utilis\u00e9 pour m\u00e9moriser des valeurs complexes n\u00e9cessitant des calculs co\u00fbteux. Cela pr\u00e9vient les recalculations inutiles \u00e0 chaque rendu.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useMemo } from 'react';\n\nconst MyComponent = ({ values }) => {\n  const computedValue = useMemo(() => {\n    return values.reduce((acc, val) => acc + val, 0); \/\/ Calculer le total des valeurs\n  }, [values]);\n\n  return <div>{computedValue}<\/div>;\n};\n\nexport default MyComponent;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En \u00e9vitant l&rsquo;actualisation inutile d&rsquo;un composant en React, nous pouvons consid\u00e9rablement am\u00e9liorer les performances de nos applications. Utiliser shouldComponentUpdate pour les composants de classe, React.memo pour les composants fonctionnels, PureComponent, ainsi que les hooks useMemo et useCallback sont des techniques essentielles pour parvenir \u00e0 cette optimisation. En continuant \u00e0 explorer et \u00e0 appliquer ces techniques, vous d\u00e9couvrirez des moyens encore plus efficaces de rendre vos applications React rapides et r\u00e9actives. Pour plus de conseils et de meilleures pratiques en React, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/rendre-votre-application-react-super-rapide\/123\">tutoriel d\u00e9taill\u00e9 sur l&rsquo;optimisation de React<\/a>.<\/p>\n\n\n\n<p>Pour ceux qui souhaitent aller plus loin, nous vous recommandons de suivre notre cours sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener noreferrer\">la cr\u00e9ation de sites interactifs avec React et Redux<\/a>. Vous y apprendrez \u00e9galement des techniques avanc\u00e9es pour g\u00e9rer vos applications React. Pour mieux mettre en pratique vos comp\u00e9tences, ne manquez pas de consulter nos guides sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener noreferrer\">l&rsquo;introduction et les avantages de React<\/a> ou sur <a href=\"https:\/\/wikiform.fr\/codespace\/extensions-indispensables-developper-react\" target=\"_blank\" rel=\"noopener noreferrer\">les extensions indispensables pour d\u00e9velopper avec React<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-REDUX-ET-REACT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation Redux et React Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>\u00c9viter l&rsquo;Actualisation Inutile d&rsquo;un Composant en React est une pratique essentielle pour optimiser les performances et garantir une exp\u00e9rience utilisateur fluide. Cette technique permet d&rsquo;\u00e9viter&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-et-redux","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5944"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5944\/revisions"}],"predecessor-version":[{"id":5945,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5944\/revisions\/5945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3207"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}