Modifier State Proprement React<\/title>\n<\/head>\n<body>\n\n<p><strong>Modifier Proprement le State en React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec cette biblioth\u00e8que populaire de JavaScript. Une gestion efficace et propre du state peut mener \u00e0 des applications plus performantes et plus faciles \u00e0 maintenir. Dans ce tutoriel, nous allons explorer des techniques et des bonnes pratiques pour modifier le state en React de mani\u00e8re optimale.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion du State 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\/706058108?dnt=1&fullscreen=0&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 \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 \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) {\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();\n }\n});\n<\/script>\n\n\n\n<p>La gestion du state dans React est un aspect fondamental du d\u00e9veloppement d’applications avec cette biblioth\u00e8que. Le state repr\u00e9sente les donn\u00e9es locales de chaque composant et d\u00e9termine comment le composant se comporte et s’affiche. Travailler correctement avec le state n\u00e9cessite une compr\u00e9hension claire du cycle de vie des composants et des techniques de gestion de la mise \u00e0 jour du state.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer le State Initial<\/h3>\n\n\n\n<p>Commen\u00e7ons par d\u00e9finir le state initial dans un composant fonctionnel, en utilisant la fonction <code>useState<\/code> fournie par React. Voici un exemple de configuration de state initial pour un composant qui g\u00e8re un compteur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n \/\/ D\u00e9claration du state initial\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <p>Le compteur est \u00e0 : {count}<\/p>\n <button onClick={() => setCount(count + 1)}>Incr\u00e9menter<\/button>\n <\/div>\n );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour le State Correctement<\/h3>\n\n\n\n<p>Pour mettre \u00e0 jour le state correctement, il est important d’utiliser la fonction de mise \u00e0 jour retourn\u00e9e par <code>useState<\/code>, et de le faire de mani\u00e8re immuable. Une mise \u00e0 jour immuable signifie que nous ne modifions jamais directement le state existant, mais nous cr\u00e9ons plut\u00f4t une nouvelle copie du state avec les modifications souhait\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoList() {\n \/\/ D\u00e9claration du state initial\n const [todos, setTodos] = useState([{ task: 'Apprendre React', completed: false }]);\n\n const addTodo = () => {\n setTodos([...todos, { task: 'Cr\u00e9er un nouvel \u00e9l\u00e9ment', completed: false }]);\n };\n\n return (\n <div>\n <ul>\n {todos.map((todo, index) => (\n <li key={index}>{todo.task}<\/li>\n ))}\n <\/ul>\n <button onClick={addTodo}>Ajouter T\u00e2che<\/button>\n <\/div>\n );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions de Mise \u00e0 Jour<\/h3>\n\n\n\n<p>Parfois, les mises \u00e0 jour du state d\u00e9pendent de la valeur actuelle du state. Dans ces cas, il est recommand\u00e9 d’utiliser une fonction de mise \u00e0 jour qui prend l’\u00e9tat pr\u00e9c\u00e9dent comme argument, pour garantir des mises \u00e0 jour correctes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(prevCount => prevCount + 1);\n };\n\n return (\n <div>\n <p>Le compteur est \u00e0 : {count}<\/p>\n <button onClick={increment}>Incr\u00e9menter<\/button>\n <\/div>\n );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Attention aux Effets de Bord<\/h3>\n\n\n\n<p>Les effets de bord peuvent compliquer la gestion du state. Il est crucial de les g\u00e9rer correctement en utilisant le hook <code>useEffect<\/code>. Ce hook vous permet de d\u00e9finir des effets qui se produisent apr\u00e8s chaque rendu, comme les appels API ou la mise \u00e0 jour de titres de page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n fetch('https:\/\/api.example.com\/data')\n .then(response => response.json())\n .then(data => setData(data));\n }, []); \/\/ Les crochets vides signifient que cet effet s'ex\u00e9cute uniquement au premier rendu\n\n return (\n <div>\n {data ? <pre>{JSON.stringify(data, null, 2)}<\/pre> : <p>Chargement...<\/p>}\n <\/div>\n );\n}\n\nexport default DataFetcher;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer le State Complexe avec useReducer<\/h3>\n\n\n\n<p>Pour une gestion du state plus complexe, React propose le hook <code>useReducer<\/code>. Ce hook est particuli\u00e8rement utile lorsque le state a plusieurs sous-valeurs ou n\u00e9cessite des mises \u00e0 jour conditionnelles. Voici un exemple d’utilisation de <code>useReducer<\/code> pour g\u00e9rer un formulaire complexe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useReducer } from 'react';\n\nconst initialState = { name: '', email: '', address: '' };\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'SET_FIELD':\n return { ...state, [action.field]: action.value };\n default:\n throw new Error();\n }\n}\n\nfunction UserForm() {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const handleChange = e => {\n dispatch({ type: 'SET_FIELD', field: e.target.name, value: e.target.value });\n };\n\n return (\n <form>\n <input name=\"name\" value={state.name} onChange={handleChange} placeholder=\"Nom\" \/>\n <input name=\"email\" value={state.email} onChange={handleChange} placeholder=\"Email\" \/>\n <input name=\"address\" value={state.address} onChange={handleChange} placeholder=\"Adresse\" \/>\n <button type=\"submit\">Soumettre<\/button>\n <\/form>\n );\n}\n\nexport default UserForm;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Dans ce tutoriel, nous avons explor\u00e9 diverses techniques pour <strong>modifier proprement le state en React<\/strong>. En suivant les bonnes pratiques de mise \u00e0 jour immuable du state, en utilisant des fonctions de mise \u00e0 jour et en g\u00e9rant les effets de bord avec <code>useEffect<\/code>, vous pouvez cr\u00e9er des applications React plus robustes et maintenables. Pour aller plus loin, nous vous encourageons \u00e0 explorer les hooks avanc\u00e9s comme <code>useReducer<\/code> pour des besoins de gestion de state encore plus complexes.<\/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\/react-redux-course.png\" loading=\"lazy\" alt=\"Learnify React & Redux Course\" 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=\"Formation Redux et React - Offre Sp\u00e9ciale 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour enrichir encore vos connaissances, consultez nos autres articles :<\/p>\n<ul>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu’est-ce que React : Introduction et Avantages<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">Meilleurs logiciels pour d\u00e9velopper avec React<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\" target=\"_blank\" rel=\"noopener\">Comment ajouter un nouveau composant React<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">\u00c0 la d\u00e9couverte des props en React<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">Utiliser les fonctions fl\u00e9ch\u00e9es en JavaScript et React<\/a><\/li>\n<\/ul>\n\n\n<p>Pour approfondir encore plus, voici quelques ressources externes recommand\u00e9es :<\/p>\n<ul>\n <li><a href=\"https:\/\/fr.reactjs.org\/docs\/hooks-state.html\" target=\"_blank\" rel=\"dofollow noopener\">Documentation officielle de React sur les Hooks<\/a><\/li>\n <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Objets_globaux\/Map\" target=\"_blank\" rel=\"dofollow noopener\">MDN Web Docs sur les objets Map en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/kentcdodds.com\/blog\/when-to-useMemo-and-useCallback\" target=\"_blank\" rel=\"dofollow noopener\">Article de Kent C. Dodds sur les hooks useMemo et useCallback<\/a><\/li>\n<\/ul>\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) {\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\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143')\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","protected":false},"excerpt":{"rendered":"<p>Modifier State Proprement React Modifier Proprement le State en React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec cette biblioth\u00e8que populaire de JavaScript. Une…<\/p>\n","protected":false},"author":2,"featured_media":3235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5934","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\/5934","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=5934"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5934\/revisions"}],"predecessor-version":[{"id":5935,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5934\/revisions\/5935"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3235"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":5934,"date":"2024-09-15T09:24:23","date_gmt":"2024-09-15T09:24:23","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/modifier-proprement-state-react\/"},"modified":"2024-09-15T09:24:27","modified_gmt":"2024-09-15T09:24:27","slug":"modifier-proprement-state-react","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/modifier-proprement-state-react\/","title":{"rendered":"3.12 Modifier Proprement le State en React"},"content":{"rendered":"\n\n\n \n \n Modifier State Proprement React<\/title>\n<\/head>\n<body>\n\n<p><strong>Modifier Proprement le State en React<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec cette biblioth\u00e8que populaire de JavaScript. Une gestion efficace et propre du state peut mener \u00e0 des applications plus performantes et plus faciles \u00e0 maintenir. Dans ce tutoriel, nous allons explorer des techniques et des bonnes pratiques pour modifier le state en React de mani\u00e8re optimale.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la Gestion du State 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\/706058108?dnt=1&fullscreen=0&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 \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 \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) {\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();\n }\n});\n<\/script>\n\n\n\n<p>La gestion du state dans React est un aspect fondamental du d\u00e9veloppement d’applications avec cette biblioth\u00e8que. Le state repr\u00e9sente les donn\u00e9es locales de chaque composant et d\u00e9termine comment le composant se comporte et s’affiche. Travailler correctement avec le state n\u00e9cessite une compr\u00e9hension claire du cycle de vie des composants et des techniques de gestion de la mise \u00e0 jour du state.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configurer le State Initial<\/h3>\n\n\n\n<p>Commen\u00e7ons par d\u00e9finir le state initial dans un composant fonctionnel, en utilisant la fonction <code>useState<\/code> fournie par React. Voici un exemple de configuration de state initial pour un composant qui g\u00e8re un compteur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n \/\/ D\u00e9claration du state initial\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <p>Le compteur est \u00e0 : {count}<\/p>\n <button onClick={() => setCount(count + 1)}>Incr\u00e9menter<\/button>\n <\/div>\n );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour le State Correctement<\/h3>\n\n\n\n<p>Pour mettre \u00e0 jour le state correctement, il est important d’utiliser la fonction de mise \u00e0 jour retourn\u00e9e par <code>useState<\/code>, et de le faire de mani\u00e8re immuable. Une mise \u00e0 jour immuable signifie que nous ne modifions jamais directement le state existant, mais nous cr\u00e9ons plut\u00f4t une nouvelle copie du state avec les modifications souhait\u00e9es :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction TodoList() {\n \/\/ D\u00e9claration du state initial\n const [todos, setTodos] = useState([{ task: 'Apprendre React', completed: false }]);\n\n const addTodo = () => {\n setTodos([...todos, { task: 'Cr\u00e9er un nouvel \u00e9l\u00e9ment', completed: false }]);\n };\n\n return (\n <div>\n <ul>\n {todos.map((todo, index) => (\n <li key={index}>{todo.task}<\/li>\n ))}\n <\/ul>\n <button onClick={addTodo}>Ajouter T\u00e2che<\/button>\n <\/div>\n );\n}\n\nexport default TodoList;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les Fonctions de Mise \u00e0 Jour<\/h3>\n\n\n\n<p>Parfois, les mises \u00e0 jour du state d\u00e9pendent de la valeur actuelle du state. Dans ces cas, il est recommand\u00e9 d’utiliser une fonction de mise \u00e0 jour qui prend l’\u00e9tat pr\u00e9c\u00e9dent comme argument, pour garantir des mises \u00e0 jour correctes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n const increment = () => {\n setCount(prevCount => prevCount + 1);\n };\n\n return (\n <div>\n <p>Le compteur est \u00e0 : {count}<\/p>\n <button onClick={increment}>Incr\u00e9menter<\/button>\n <\/div>\n );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Attention aux Effets de Bord<\/h3>\n\n\n\n<p>Les effets de bord peuvent compliquer la gestion du state. Il est crucial de les g\u00e9rer correctement en utilisant le hook <code>useEffect<\/code>. Ce hook vous permet de d\u00e9finir des effets qui se produisent apr\u00e8s chaque rendu, comme les appels API ou la mise \u00e0 jour de titres de page :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useState, useEffect } from 'react';\n\nfunction DataFetcher() {\n const [data, setData] = useState(null);\n\n useEffect(() => {\n fetch('https:\/\/api.example.com\/data')\n .then(response => response.json())\n .then(data => setData(data));\n }, []); \/\/ Les crochets vides signifient que cet effet s'ex\u00e9cute uniquement au premier rendu\n\n return (\n <div>\n {data ? <pre>{JSON.stringify(data, null, 2)}<\/pre> : <p>Chargement...<\/p>}\n <\/div>\n );\n}\n\nexport default DataFetcher;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer le State Complexe avec useReducer<\/h3>\n\n\n\n<p>Pour une gestion du state plus complexe, React propose le hook <code>useReducer<\/code>. Ce hook est particuli\u00e8rement utile lorsque le state a plusieurs sous-valeurs ou n\u00e9cessite des mises \u00e0 jour conditionnelles. Voici un exemple d’utilisation de <code>useReducer<\/code> pour g\u00e9rer un formulaire complexe :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>import React, { useReducer } from 'react';\n\nconst initialState = { name: '', email: '', address: '' };\n\nfunction reducer(state, action) {\n switch (action.type) {\n case 'SET_FIELD':\n return { ...state, [action.field]: action.value };\n default:\n throw new Error();\n }\n}\n\nfunction UserForm() {\n const [state, dispatch] = useReducer(reducer, initialState);\n\n const handleChange = e => {\n dispatch({ type: 'SET_FIELD', field: e.target.name, value: e.target.value });\n };\n\n return (\n <form>\n <input name=\"name\" value={state.name} onChange={handleChange} placeholder=\"Nom\" \/>\n <input name=\"email\" value={state.email} onChange={handleChange} placeholder=\"Email\" \/>\n <input name=\"address\" value={state.address} onChange={handleChange} placeholder=\"Adresse\" \/>\n <button type=\"submit\">Soumettre<\/button>\n <\/form>\n );\n}\n\nexport default UserForm;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Dans ce tutoriel, nous avons explor\u00e9 diverses techniques pour <strong>modifier proprement le state en React<\/strong>. En suivant les bonnes pratiques de mise \u00e0 jour immuable du state, en utilisant des fonctions de mise \u00e0 jour et en g\u00e9rant les effets de bord avec <code>useEffect<\/code>, vous pouvez cr\u00e9er des applications React plus robustes et maintenables. Pour aller plus loin, nous vous encourageons \u00e0 explorer les hooks avanc\u00e9s comme <code>useReducer<\/code> pour des besoins de gestion de state encore plus complexes.<\/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\/react-redux-course.png\" loading=\"lazy\" alt=\"Learnify React & Redux Course\" 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=\"Formation Redux et React - Offre Sp\u00e9ciale 50%\" title=\"\"><\/a>\n\n\n\n<p>Pour enrichir encore vos connaissances, consultez nos autres articles :<\/p>\n<ul>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">Qu’est-ce que React : Introduction et Avantages<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\" target=\"_blank\" rel=\"noopener\">Meilleurs logiciels pour d\u00e9velopper avec React<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/comment-ajouter-nouveau-composant-react\" target=\"_blank\" rel=\"noopener\">Comment ajouter un nouveau composant React<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/a-la-decouverte-des-props-react-guide\" target=\"_blank\" rel=\"noopener\">\u00c0 la d\u00e9couverte des props en React<\/a><\/li>\n <li><a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\" target=\"_blank\" rel=\"noopener\">Utiliser les fonctions fl\u00e9ch\u00e9es en JavaScript et React<\/a><\/li>\n<\/ul>\n\n\n<p>Pour approfondir encore plus, voici quelques ressources externes recommand\u00e9es :<\/p>\n<ul>\n <li><a href=\"https:\/\/fr.reactjs.org\/docs\/hooks-state.html\" target=\"_blank\" rel=\"dofollow noopener\">Documentation officielle de React sur les Hooks<\/a><\/li>\n <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Reference\/Objets_globaux\/Map\" target=\"_blank\" rel=\"dofollow noopener\">MDN Web Docs sur les objets Map en JavaScript<\/a><\/li>\n <li><a href=\"https:\/\/kentcdodds.com\/blog\/when-to-useMemo-and-useCallback\" target=\"_blank\" rel=\"dofollow noopener\">Article de Kent C. Dodds sur les hooks useMemo et useCallback<\/a><\/li>\n<\/ul>\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) {\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\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143')\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","protected":false},"excerpt":{"rendered":"<p>Modifier State Proprement React Modifier Proprement le State en React est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur travaillant avec cette biblioth\u00e8que populaire de JavaScript. Une…<\/p>\n","protected":false},"author":2,"featured_media":3235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5934","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\/5934","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=5934"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5934\/revisions"}],"predecessor-version":[{"id":5935,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5934\/revisions\/5935"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3235"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}