{"id":5952,"date":"2024-09-24T09:24:38","date_gmt":"2024-09-24T09:24:38","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/limiter-mise-a-jour-inutile-react-hooks\/"},"modified":"2024-09-24T09:24:42","modified_gmt":"2024-09-24T09:24:42","slug":"limiter-mise-a-jour-inutile-react-hooks","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/limiter-mise-a-jour-inutile-react-hooks\/","title":{"rendered":"5.4 Limiter la Mise \u00e0 Jour Inutile avec React Hooks"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Limiter la Mise \u00e0 Jour Inutile avec React Hooks<\/strong> est essentiel pour optimiser les performances de vos applications React. Comprendre comment identifier et \u00e9viter les rerenders superflus peut significativement am\u00e9liorer la r\u00e9activit\u00e9 et la efficacit\u00e9 de vos composants. Apprenons comment y parvenir avec des exemples concrets et des pratiques recommand\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Limitation des Mises \u00e0 Jour avec React Hooks<\/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\/706063420?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<p>Pour optimiser les performances en React, il est crucial d\u2019\u00e9viter les mises \u00e0 jour inutiles de composants. React Hooks comme <code>useState<\/code> et <code>useEffect<\/code> peuvent entra\u00eener des rerenders fr\u00e9quents si mal utilis\u00e9s. Dans ce tutoriel, nous allons explorer des strat\u00e9gies pour contr\u00f4ler ces rerenders et booster les performances de votre application.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Comprendre les Causes des Mises \u00e0 Jour Inutiles<\/h3>\n\n\n\n<p>Dans React, une mise \u00e0 jour de l&rsquo;\u00e9tat ou des propri\u00e9t\u00e9s d\u2019un composant entra\u00eene un rerender. Cependant, toutes ces mises \u00e0 jour ne sont pas n\u00e9cessaires. Voici les principales causes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>\/\/ Exemple de composant avec un \u00e9tat inutilement mis \u00e0 jour\nimport React, { useState, useEffect } from 'react';\n\nfunction Compteur() {\n  const [count, setCount] = useState(0);\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setCount(prevCount => prevCount + 1);\n    }, 1000);\n\n    return () => clearInterval(timer);\n  }, []);\n\n  return (\n    <div>\n      <p>Compteur: {count}<\/p>\n    <\/div>\n  );\n}\n\nexport default Compteur;\n<\/code><\/pre>\n\n\n<p>Dans cet exemple, le composant <code>Compteur<\/code> continue de se rerender toutes les secondes. Mais pourquoi ? Parce que l&rsquo;\u00e9tat est mis \u00e0 jour, d\u00e9clenchant un rerender.<\/p>\n\n<p>L&rsquo;optimisation de ces mises \u00e0 jour est cruciale pour des <a href=\"https:\/\/wikiform.fr\/codespace\/eviter-actualisation-inutile-composant-react\" target=\"_blank\" rel=\"noopener\">performances React<\/a> am\u00e9lior\u00e9es.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Optimisation avec useMemo et useCallback<\/h3>\n\n\n\n<p>Pour \u00e9viter des re-calculs et re-renders inutiles, React propose <code>useMemo<\/code> et <code>useCallback<\/code>. Utilisez <code>useMemo<\/code> pour m\u00e9moriser les valeurs calcul\u00e9es, et <code>useCallback<\/code> pour m\u00e9moriser les fonctions.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useMemo, useCallback } from 'react';\n\nfunction List({ items, computeItem }) {\n  const renderedItems = items.map(item => computeItem(item));\n  return (\n    <ul>\n      {renderedItems.map((result, index) => (\n        <li key={index}>{result}<\/li>\n      ))}\n    <\/ul>\n  );\n}\n\nfunction ExpensiveComputation() {\n  const [count, setCount] = useState(0);\n  const items = useMemo(() => Array.from({ length: 1000 }, (_, i) => i), []);\n\n  const computeItem = useCallback(item => {\n    for (let i = 0; i < 1000000; i++) {} \/\/ Simuler une op\u00e9ration co\u00fbteuse\n    return item + count;\n  }, [count]);\n\n  return (\n    <div>\n      <button onClick={() => setCount(count + 1)}>Compter {count}<\/button>\n      <List items={items} computeItem={computeItem} \/>\n    <\/div>\n  );\n}\n\nexport default ExpensiveComputation;\n<\/code><\/pre>\n\n\n<p>D\u00e9couvrez plus sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\" target=\"_blank\" rel=\"noopener\">React Hooks<\/a> et leur utilisation.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Utilisation de React.memo pour M\u00e9moriser des Composants<\/h3>\n\n\n\n<p><code>React.memo<\/code> est utilis\u00e9 pour m\u00e9moriser le rendu d\u2019un composant. Cela emp\u00eache le composant de se rerender inutilement si ses propri\u00e9t\u00e9s n&rsquo;ont pas chang\u00e9.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { memo, useState } from 'react';\n\nconst BoutonMemo = memo(function Bouton({ onClick }) {\n  console.log('Bouton rendu');\n  return <button onClick={onClick}>Clique moi<\/button>;\n});\n\nfunction Form() {\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <h1>Compteur: {count}<\/h1>\n      <BoutonMemo onClick={() => setCount(count + 1)} \/>\n    <\/div>\n  );\n}\n\nexport default Form;\n<\/code><\/pre>\n\n\n<p>Apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">cr\u00e9er une application React<\/a> en int\u00e9grant des pratiques d&rsquo;optimisation comme celles-ci.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Eviter les Rerenders avec des Comparateurs D\u00e9di\u00e9s<\/h3>\n\n\n\n<p>Pour des contr\u00f4les avanc\u00e9s sur le rerendering, vous pouvez passer une fonction de comparaison personnalis\u00e9e \u00e0 <code>React.memo<\/code>. Cela vous permet de d\u00e9finir des crit\u00e8res sp\u00e9cifiques pour \u00e9viter des rerenders inutiles.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>const BoutonAvecComparaison = memo(function Bouton({ onClick, label }) {\n  console.log('Bouton rendu avec label:', label);\n  return <button onClick={onClick}>{label}<\/button>;\n}, (prevProps, nextProps) => {\n  return prevProps.label === nextProps.label && prevProps.onClick === nextProps.onClick;\n});\n<\/code><\/pre>\n\n\n<p>Pour aller plus loin, lisez notre guide sur la <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-redux-pourquoi-utiliser\" target=\"_blank\" rel=\"noopener\">gestion de l&rsquo;\u00e9tat avec Redux<\/a> dans une application React.<\/p>\n\n\n<h3 class=\"wp-block-heading\">Le Shallow Comparison avec PureComponent<\/h3>\n\n\n\n<p>Pour les composants de classe, React propose <code>PureComponent<\/code> qui fait une comparaison superficielle de props et state, \u00e9vitant ainsi des rerenders inutiles pour les composants avec des changements mineurs.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { PureComponent } from 'react';\n\nclass PureBouton extends PureComponent {\n  render() {\n    return <button onClick={this.props.onClick}>{this.props.label}<\/button>;\n  }\n}\n\nexport default PureBouton;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>En optimisant les mises \u00e0 jour inutiles avec React Hooks, vous pouvez significativement am\u00e9liorer les performances de vos applications. Utilisez des techniques comme <code>useMemo<\/code>, <code>useCallback<\/code>, <code>React.memo<\/code> et <code>PureComponent<\/code> pour \u00e9viter les rerenders superflus. En comprenant les sources de rerenders inutiles, vous pouvez construire des applications React plus r\u00e9actives et efficaces.<\/p>\n\n\n<p>Pour approfondir vos connaissances sur les React Hooks et leur application, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\" target=\"_blank\" rel=\"noopener\">tutoriel de cr\u00e9ation d&rsquo;application React<\/a>.<\/p>\n\n\n<a href=\"https:\/\/example.com\/formation-react\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/example.com\/learn-react.png\" loading=\"lazy\" alt=\"Learn React Today!\" title=\"\"><\/a>\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 sp\u00e9ciale\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Limiter la Mise \u00e0 Jour Inutile avec React Hooks est essentiel pour optimiser les performances de vos applications React. Comprendre comment identifier et \u00e9viter&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5952","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\/5952","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=5952"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5952\/revisions"}],"predecessor-version":[{"id":5953,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5952\/revisions\/5953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3220"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5952"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5952"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5952"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}