{"id":5950,"date":"2024-09-23T09:25:19","date_gmt":"2024-09-23T09:25:19","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/autres-etats-avec-react-hooks-explications\/"},"modified":"2024-09-23T09:25:23","modified_gmt":"2024-09-23T09:25:23","slug":"autres-etats-avec-react-hooks-explications","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/autres-etats-avec-react-hooks-explications\/","title":{"rendered":"5.3 Les Autres \u00c9tats avec les React Hooks : Explications"},"content":{"rendered":"\n<p><strong>Les autres \u00e9tats avec les React Hooks<\/strong> sont fondamentaux pour la gestion efficace de l&rsquo;\u00e9tat dans vos applications React. Comprendre comment utiliser divers hooks pour g\u00e9rer l&rsquo;\u00e9tat vari\u00e9 et complexe peut grandement am\u00e9liorer la r\u00e9activit\u00e9 et la performance de vos applications. D\u00e9couvrons les diff\u00e9rents types de hooks d&rsquo;\u00e9tat et comment les impl\u00e9menter gr\u00e2ce \u00e0 des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>React Hooks<\/strong> et aux Autres \u00c9tats<\/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\/706063144?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>Les hooks React sont des fonctions qui vous permettent d\u2019utiliser l\u2019\u00e9tat et d\u2019autres fonctionnalit\u00e9s de React sans \u00e9crire de classes. Ils incluent <code>useState<\/code>, <code>useEffect<\/code>, et bien d\u2019autres. Aujourd&rsquo;hui, nous discuterons des autres \u00e9tats que vous pouvez g\u00e9rer avec les hooks, comme les \u00e9tats complexes, les \u00e9tats asynchrones, et plus encore.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer des \u00c9tats Complexes avec <code>useReducer<\/code><\/h3>\n\n\n\n<p>Pour les \u00c9tats qui n\u00e9cessitent une logique plus complexe, vous pouvez utiliser le hook <code>useReducer<\/code>. Il est souvent pr\u00e9f\u00e9rable \u00e0 <code>useState<\/code> lorsque vous avez des \u00c9tats imbriqu\u00e9s ou multiples qui doivent \u00eatre mis \u00e0 jour de mani\u00e8re conditionnelle. Pour plus de d\u00e9tails, vous pouvez consulter notre article sur la <a href=\"https:\/\/wikiform.fr\/codespace\/analyse-differents-etats-cycle-vie-react\">analyse des diff\u00e9rents \u00e9tats du cycle de vie React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useReducer } from 'react';\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction Counter() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <>\n      <span>Count: {state.count}<\/span>\n      <button onClick={() => dispatch({ type: 'increment' })}>+<\/button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-<\/button>\n    <\/>\n  );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les \u00c9tats de Formulaire avec <code>useState<\/code> et <code>useReducer<\/code><\/h3>\n\n\n\n<p>Les formulaires peuvent avoir des \u00c9tats complexes touchant plusieurs champs. Utiliser <code>useReducer<\/code> peut simplifier la gestion et la validation des donn\u00e9es de formulaire. Un bon point de d\u00e9part pour les formulaires en React est notre <a href=\"https:\/\/wikiform.fr\/codespace\/formulaires-react-guide-complet\">guide complet sur les formulaires en React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useReducer } from 'react';\n\nconst initialState = {\n  username: '',\n  email: '',\n  password: ''\n};\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'updateField':\n      return {\n        ...state,\n        [action.field]: action.value\n      };\n    default:\n      return state;\n  }\n}\n\nfunction SignupForm() {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  const handleChange = (e) => {\n    dispatch({\n      type: 'updateField',\n      field: e.target.name,\n      value: e.target.value\n    });\n  };\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    console.log(state);\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <label>\n        Username:\n        <input type=\"text\" name=\"username\" value={state.username} onChange={handleChange} \/>\n      <\/label>\n      <label>\n        Email:\n        <input type=\"email\" name=\"email\" value={state.email} onChange={handleChange} \/>\n      <\/label>\n      <label>\n        Password:\n        <input type=\"password\" name=\"password\" value={state.password} onChange={handleChange} \/>\n      <\/label>\n      <button type=\"submit\">Sign Up<\/button>\n    <\/form>\n  );\n}\n\nexport default SignupForm;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les \u00c9tats Asynchrones avec <code>useState<\/code> et <code>useEffect<\/code><\/h3>\n\n\n\n<p>G\u00e9rer les appels API et les \u00c9tats asynchrones est une t\u00e2che courante dans les applications React. Vous pouvez utiliser <code>useState<\/code> pour stocker les donn\u00e9es obtenues et <code>useEffect<\/code> pour effectuer les appels API. Pour plus de conseils sur la gestion des effets, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-state-avec-react-hooks-guide\">guide sur l&rsquo;utilisation de useState et useEffect avec les React Hooks<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, useEffect } from 'react';\n\nfunction DataFetchingComponent() {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    fetch('https:\/\/api.example.com\/data')\n      .then((response) => response.json())\n      .then((data) => {\n        setData(data);\n        setLoading(false);\n      })\n      .catch((error) => {\n        setError(error);\n        setLoading(false);\n      });\n  }, []);\n\n  if (loading) return <p>Loading...<\/p>;\n  if (error) return <p>Error: {error.message}<\/p>;\n\n  return (\n    <div>\n      <h1>Data:<\/h1>\n      <pre>{JSON.stringify(data, null, 2)}<\/pre>\n    <\/div>\n  );\n}\n\nexport default DataFetchingComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des \u00c9tats Dirig\u00e9s par des \u00c9v\u00e9nements avec <code>useState<\/code> et <code>useContext<\/code><\/h3>\n\n\n\n<p>Le hook <code>useContext<\/code> vous permet de partager l&rsquo;\u00e9tat globalement \u00e0 travers votre application, tandis que <code>useState<\/code> g\u00e8re les changements d&rsquo;\u00e9tat locaux d\u00e9clench\u00e9s par les \u00e9v\u00e9nements. Pour plus de d\u00e9tails, n&rsquo;h\u00e9sitez pas \u00e0 consulter notre article sur l&rsquo;<a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-utiliser-context-api-react\">utilisation de l&rsquo;API de contexte React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useState, createContext, useContext } from 'react';\n\nconst AppContext = createContext();\n\nfunction ParentComponent() {\n  const [state, setState] = useState({ user: 'John Doe', theme: 'dark' });\n\n  return (\n    <AppContext.Provider value={{ state, setState }}>\n      <ChildComponent \/>\n    <\/AppContext.Provider>\n  );\n}\n\nfunction ChildComponent() {\n  const { state, setState } = useContext(AppContext);\n\n  const toggleTheme = () => {\n    setState((prevState) => ({\n      ...prevState,\n      theme: prevState.theme === 'dark' ? 'light' : 'dark'\n    }));\n  };\n\n  return (\n    <>\n      <p>User: {state.user}<\/p>\n      <p>Current Theme: {state.theme}<\/p>\n      <button onClick={toggleTheme}>Toggle Theme<\/button>\n    <\/>\n  );\n}\n\nexport default ParentComponent;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des \u00c9tats G\u00e9r\u00e9s Globalement avec <code>useContext<\/code> et <code>useReducer<\/code><\/h3>\n\n\n\n<p>Pour g\u00e9rer les \u00e9tats globalement dans une grande application, utilisez une combinaison de <code>useContext<\/code> et <code>useReducer<\/code>. Cela permet une gestion centralis\u00e9e et plus organis\u00e9e des \u00c9tats complexes. Ces techniques sont particuli\u00e8rement utiles lorsque vous travaillez sur des projets plus vastes tels que votre <a href=\"https:\/\/wikiform.fr\/codespace\/projet-to-do-list-amelioree-react-plan\">projet de to-do list am\u00e9lior\u00e9e avec React<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>import React, { useReducer, useContext, createContext } from 'react';\n\nconst AppContext = createContext();\n\nconst initialState = { count: 0 };\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      throw new Error();\n  }\n}\n\nfunction AppProvider({ children }) {\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <AppContext.Provider value={{ state, dispatch }}>\n      {children}\n    <\/AppContext.Provider>\n  );\n}\n\nfunction Counter() {\n  const { state, dispatch } = useContext(AppContext);\n\n  return (\n    <>\n      <span>Count: {state.count}<\/span>\n      <button onClick={() => dispatch({ type: 'increment' })}>+<\/button>\n      <button onClick={() => dispatch({ type: 'decrement' })}>-<\/button>\n    <\/>\n  );\n}\n\nfunction App() {\n  return (\n    <AppProvider>\n      <Counter \/>\n    <\/AppProvider>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>Pour continuer \u00e0 ma\u00eetriser les autres \u00e9tats avec les React Hooks, vous pouvez consulter des ressources en ligne telles que la <a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener\">documentation officielle de React<\/a>, <a href=\"https:\/\/www.udemy.com\" target=\"_blank\" rel=\"noopener\">Udemy<\/a> pour des cours structur\u00e9s, ou explorer des articles approfondis sur des sites comme <a href=\"https:\/\/www.freecodecamp.org\" target=\"_blank\" rel=\"noopener\">freeCodeCamp<\/a>. Plus pr\u00e9cis\u00e9ment, vous pouvez lire sur les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-fonctions-flechees-javascript-react\">fonctionnalit\u00e9s des fonctions fl\u00e9ch\u00e9es en JavaScript pour React<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>G\u00e9rer les autres \u00e9tats avec les <strong>React Hooks<\/strong> est une comp\u00e9tence essentielle pour tout d\u00e9veloppeur React. En utilisant correctement les hooks comme <code>useReducer<\/code>, <code>useState<\/code>, <code>useEffect<\/code>, et <code>useContext<\/code>, vous pouvez cr\u00e9er des applications React r\u00e9actives, maintenables et performantes. Continuez \u00e0 explorer les possibilit\u00e9s offertes par les hooks pour am\u00e9liorer vos comp\u00e9tences en d\u00e9veloppement React et offrir des exp\u00e9riences utilisateur exceptionnelles. Pour des tutoriels sur l&rsquo;int\u00e9gration de React avec d&rsquo;autres biblioth\u00e8ques, consultez nos articles sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/cr%C3%A9er-des-sites-interactifs-avec-react-et-redux\/143\">React et Redux<\/a>. Pour approfondir vos connaissances sur les hooks, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/maitriser-les-hooks-react\">guide complet des React Hooks<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/","protected":false},"excerpt":{"rendered":"<p>Les autres \u00e9tats avec les React Hooks sont fondamentaux pour la gestion efficace de l&rsquo;\u00e9tat dans vos applications React. Comprendre comment utiliser divers hooks pour&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5950","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\/5950","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=5950"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5950\/revisions"}],"predecessor-version":[{"id":5951,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5950\/revisions\/5951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3171"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}