{"id":5948,"date":"2024-09-22T09:24:24","date_gmt":"2024-09-22T09:24:24","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\/"},"modified":"2024-09-22T09:24:28","modified_gmt":"2024-09-22T09:24:28","slug":"utiliser-state-avec-react-hooks-guide","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\/","title":{"rendered":"5.2 Utiliser le State avec les React Hooks : Guide"},"content":{"rendered":"\n<p><strong>Utiliser le State avec les React Hooks<\/strong> est essentiel pour g\u00e9rer efficacement l&rsquo;\u00e9tat de vos composants fonctionnels dans React. Comprendre comment utiliser les hooks comme <code>useState<\/code> peut transformer vos applications en les rendant plus r\u00e9actives et plus faciles \u00e0 g\u00e9rer. Plongeons dans le sujet avec des exemples concrets de code pour apprendre \u00e0 utiliser <strong>useState<\/strong> dans React.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 <strong>useState<\/strong> avec les Hooks de 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\/706062929?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>Le hook <code>useState<\/code> permet d&rsquo;ajouter l&rsquo;\u00e9tat local \u00e0 une fonction composant. Avant l&rsquo;introduction des hooks dans React 16.8, seules les classes pouvaient utiliser l&rsquo;\u00e9tat, mais maintenant, <code>useState<\/code> rend cette fonctionnalit\u00e9 accessible aux composants fonctionnels. Commen\u00e7ons par une simple d\u00e9monstration.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\n  \/\/ D\u00e9clare une nouvelle variable d'\u00e9tat, que nous appellerons \"count\"\n  const [count, setCount] = useState(0);\n\n  return (\n    <div>\n      <p>Vous avez cliqu\u00e9 {count} fois<\/p>\n      <button onClick={() => setCount(count + 1)}>\n        Cliquez ici\n      <\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<p>Ici, nous avons utilis\u00e9 le hook <code>useState<\/code> pour d\u00e9clarer une variable d&rsquo;\u00e9tat appel\u00e9e <code>count<\/code> et une fonction <code>setCount<\/code> pour la mettre \u00e0 jour. Chaque fois que le bouton est cliqu\u00e9, <code>setCount<\/code> est appel\u00e9 avec la nouvelle valeur de <code>count<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Initialiser et Utiliser le State avec <code>useState<\/code><\/h3>\n\n\n\n<p>Pour initialiser l&rsquo;\u00e9tat avec <code>useState<\/code>, vous devez passer une valeur initiale. Cette valeur peut \u00eatre un nombre, une cha\u00eene, un tableau, ou un objet, selon vos besoins. Explorons quelques exemples :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction UserProfile() {\n  \/\/ D\u00e9clare des variables d'\u00e9tat pour diff\u00e9rents types de donn\u00e9es\n  const [name, setName] = useState('John Doe');\n  const [age, setAge] = useState(30);\n  const [hobbies, setHobbies] = useState(['Reading', 'Traveling']);\n\n  return (\n    <div>\n      <p>Name: {name}<\/p>\n      <p>Age: {age}<\/p>\n      <p>Hobbies: {hobbies.join(', ')}<\/p>\n    <\/div>\n  );\n}\n\nexport default UserProfile;\n<\/code><\/pre>\n\n\n\n<p>Ici, nous avons initialis\u00e9 <code>name<\/code> avec une cha\u00eene, <code>age<\/code> avec un nombre, et <code>hobbies<\/code> avec un tableau de cha\u00eenes de caract\u00e8res.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Mettre \u00e0 Jour le State avec <code>useState<\/code><\/h3>\n\n\n\n<p>Le hook useState extrait une fonction de mise \u00e0 jour, et cette fonction permet de mettre \u00e0 jour l&rsquo;\u00e9tat \u00e0 tout moment. Voyons comment nous pouvons mettre \u00e0 jour l&rsquo;\u00e9tat en r\u00e9ponse \u00e0 une entr\u00e9e utilisateur :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction UserForm() {\n  const [inputValue, setInputValue] = useState('');\n\n  const handleChange = (event) => {\n    setInputValue(event.target.value);\n  };\n\n  return (\n    <div>\n      <input type=\"text\" value={inputValue} onChange={handleChange} \/>\n      <p>Vous avez saisi : {inputValue}<\/p>\n    <\/div>\n  );\n}\n\nexport default UserForm;\n<\/code><\/pre>\n\n\n\n<p>Ici, nous utilisons <code>handleChange<\/code> pour capturer l&rsquo;entr\u00e9e de l&rsquo;utilisateur et mettre \u00e0 jour <code>inputValue<\/code> en cons\u00e9quence.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer l&rsquo;\u00c9tat Complexe en Utilisant un Objet<\/h3>\n\n\n\n<p>Pour des \u00e9tats plus complexes, il est possible de g\u00e9rer plusieurs valeurs dans un objet unique. Voyons comment cela fonctionne :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction Form() {\n  const [formState, setFormState] = useState({\n    firstName: '',\n    lastName: '',\n  });\n\n  const handleChange = (event) => {\n    const { name, value } = event.target;\n    setFormState((prevState) => ({\n      ...prevState,\n      [name]: value,\n    }));\n  };\n\n  return (\n    <div>\n      <input\n        type=\"text\"\n        name=\"firstName\"\n        value={formState.firstName}\n        onChange={handleChange}\n      \/>\n      <input\n        type=\"text\"\n        name=\"lastName\"\n        value={formState.lastName}\n        onChange={handleChange}\n      \/>\n      <p>Nom Complet : {formState.firstName} {formState.lastName}<\/p>\n    <\/div>\n  );\n}\n\nexport default Form;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, nous utilisons une seule variable d&rsquo;\u00e9tat pour suivre plusieurs valeurs. En utilisant la syntaxe <code>...prevState<\/code>, nous veillons \u00e0 ce que l&rsquo;\u00e9tat pr\u00e9c\u00e9dent soit conserv\u00e9 tout en mettant \u00e0 jour uniquement les propri\u00e9t\u00e9s n\u00e9cessaires.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des \u00c9v\u00e9nements et Mise \u00e0 Jour de l&rsquo;\u00c9tat<\/h3>\n\n\n\n<p>React permet de g\u00e9rer diff\u00e9rents types d&rsquo;\u00e9v\u00e9nements pour d\u00e9clencher des mises \u00e0 jour d&rsquo;\u00e9tat. Voyons comment g\u00e9rer un sc\u00e9nario de formulaire de saisie :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState } from 'react';\n\nfunction ContactForm() {\n  const [contact, setContact] = useState({\n    email: '',\n    message: '',\n  });\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Traitement de la soumission du formulaire\n    console.log('Formulaire soumis:', contact);\n  };\n\n  const handleChange = (event) => {\n    const { name, value } = event.target;\n    setContact((prevContact) => ({\n      ...prevContact,\n      [name]: value,\n    }));\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"email\"\n        name=\"email\"\n        value={contact.email}\n        onChange={handleChange}\n      \/>\n      <textarea\n        name=\"message\"\n        value={contact.message}\n        onChange={handleChange}\n      \/>\n      <button type=\"submit\">Envoyer<\/button>\n    <\/form>\n  );\n}\n\nexport default ContactForm;\n<\/code><\/pre>\n\n\n\n<p>Ce formulaire de contact g\u00e8re les \u00e9v\u00e9nements de changement d&rsquo;entr\u00e9e et de soumission, en utilisant <code>handleChange<\/code> pour mettre \u00e0 jour l&rsquo;\u00e9tat et <code>handleSubmit<\/code> pour traiter les donn\u00e9es \u00e0 la soumission.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser la Performance avec <code>useState<\/code><\/h3>\n\n\n\n<p>Il est crucial d&rsquo;optimiser les mises \u00e0 jour de l&rsquo;\u00e9tat pour am\u00e9liorer la performance de vos composants. Utiliser des mises \u00e0 jour bas\u00e9es sur les fonctions est l&rsquo;une des meilleures pratiques :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><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>Count: {count}<\/p>\n      <button onClick={increment}>Increment<\/button>\n    <\/div>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<p>Utiliser une fonction dans <code>setCount<\/code> permet de s&rsquo;assurer que la mise \u00e0 jour est bas\u00e9e sur la valeur pr\u00e9c\u00e9dente, \u00e9vitant ainsi des probl\u00e8mes de synchronisation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p><strong>Utiliser le State avec les React Hooks<\/strong> simplifie la gestion de l&rsquo;\u00e9tat dans les composants fonctionnels. Avec <code>useState<\/code>, vous pouvez initialiser, lire et mettre \u00e0 jour l&rsquo;\u00e9tat facilement. Explorez davantage les hooks React pour enrichir vos composants et d\u00e9velopper des applications web performantes et maintenables. Pour plus de tutoriels et ressources sur React, consultez notre <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/r\u00e9act-interm\u00e9diaire-avanc\u00e9\/150\">cours interm\u00e9diaire et avanc\u00e9 sur React<\/a>.<\/p>\n\n\n\n<p>Pour approfondir vos connaissances, d\u00e9couvrez \u00e9galement notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\">article sur les avantages de React<\/a>, notre guide sur <a href=\"https:\/\/wikiform.fr\/codespace\/meilleurs-logiciels-developper-react\">les meilleurs logiciels pour d\u00e9velopper en React<\/a>, et les derni\u00e8res <a href=\"https:\/\/wikiform.fr\/codespace\/nouveautes-javascript-savoir-react\">nouveaut\u00e9s JavaScript \u00e0 conna\u00eetre pour React<\/a>. De plus, explorez nos tutoriaux sur <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\">comment utiliser le state avec les React Hooks<\/a> et apprenez \u00e0 <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-application-react-tutoriel\">cr\u00e9er votre premi\u00e8re application React<\/a>.<\/p>\n\n\n\n<p>Si vous souhaitez aller plus loin, nous vous invitons \u00e0 consulter des ressources externes de qualit\u00e9, telles que <a href=\"https:\/\/reactjs.org\/docs\/hooks-state.html\" rel=\"dofollow noopener\" target=\"_blank\">la documentation officielle de React<\/a>, des articles sur <a href=\"https:\/\/www.freecodecamp.org\/news\/an-introduction-to-state-in-react-9aa3873fc02b\/\" rel=\"dofollow noopener\" target=\"_blank\">FreeCodeCamp<\/a>, et des tutoriels d\u00e9taill\u00e9s de <a href=\"https:\/\/www.tutorialspoint.com\/reactjs\/reactjs_state.htm\" rel=\"dofollow noopener\" target=\"_blank\">TutorialsPoint<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/r%C3%A9act-et-redux-complets\/144\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-react-redux-formation.gif\" loading=\"lazy\" alt=\"Learnify Formation React et Redux\" title=\"\"><\/a>\n\n\n<!--","protected":false},"excerpt":{"rendered":"<p>Utiliser le State avec les React Hooks est essentiel pour g\u00e9rer efficacement l&rsquo;\u00e9tat de vos composants fonctionnels dans React. Comprendre comment utiliser les hooks comme&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3284,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5948","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\/5948","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=5948"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5948\/revisions"}],"predecessor-version":[{"id":5949,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5948\/revisions\/5949"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3284"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}