{"id":5946,"date":"2024-09-21T09:24:37","date_gmt":"2024-09-21T09:24:37","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\/"},"modified":"2024-09-21T09:24:42","modified_gmt":"2024-09-21T09:24:42","slug":"qu-est-ce-que-react-hooks-guide-introduction","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-hooks-guide-introduction\/","title":{"rendered":"5.1 Qu&rsquo;est-ce que les React Hooks ? Guide d&rsquo;Introduction"},"content":{"rendered":"\n<p><strong>Les React Hooks<\/strong> r\u00e9volutionnent la mani\u00e8re dont les d\u00e9veloppeurs cr\u00e9ent et g\u00e8rent les \u00e9tats et autres fonctionnalit\u00e9s dans les composants fonctionnels de React. Comprendre et utiliser les <strong>React Hooks<\/strong> peut am\u00e9liorer consid\u00e9rablement l&rsquo;efficacit\u00e9 et la lisibilit\u00e9 de votre code. D\u00e9couvrons ensemble ce que sont les Hooks React et comment ils fonctionnent \u00e0 travers un guide d\u00e9taill\u00e9 et des exemples concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>React Hooks Introduction<\/strong><\/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\/706062857?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-speciale-\">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 React Hooks, introduits dans la version 16.8 de React, permettent d&rsquo;utiliser l&rsquo;\u00e9tat et d&rsquo;autres fonctionnalit\u00e9s de React dans les composants fonctionnels. Avant les Hooks, il \u00e9tait n\u00e9cessaire d&rsquo;utiliser des composants de classe pour g\u00e9rer l&rsquo;\u00e9tat et le cycle de vie. Aujourd&rsquo;hui, avec les Hooks, les d\u00e9veloppeurs peuvent \u00e9crire des composants plus compacts et plus faciles \u00e0 maintenir.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><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\/343647543?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-speciale-\">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<\/figure>\n\n\n\n<p>Les Hooks les plus couramment utilis\u00e9s sont <code>useState<\/code> et <code>useEffect<\/code>. Ils remplacent respectivement les \u00e9tats locaux et les m\u00e9thodes de cycle de vie dans les composants de classe. Avant d&rsquo;entrer dans les d\u00e9tails de ces Hooks, voyons d&rsquo;abord comment les utiliser de mani\u00e8re basique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Basique de useState<\/h3>\n\n\n\n<p>Le Hook <code>useState<\/code> est utilis\u00e9 pour ajouter un \u00e9tat local \u00e0 un composant fonctionnel. Voici un exemple simple de l&rsquo;utilisation de <code>useState<\/code>. Pour aller plus loin, d\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-react-introduction-avantages\" target=\"_blank\" rel=\"noopener\">d\u00e9marrer avec React<\/a> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState } from 'react';\n\nfunction Counter() {\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-moi\n            <\/button>\n        <\/div>\n    );\n}\n\nexport default Counter;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Basique de useEffect<\/h3>\n\n\n\n<p>Le Hook <code>useEffect<\/code> vous permet d&rsquo;ex\u00e9cuter des effets de c\u00f4t\u00e9 dans vos composants fonctionnels, comme les appels API, les abonnements \u00e0 des \u00e9v\u00e9nements, et bien plus encore. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState, useEffect } from 'react';\n\nfunction Example() {\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    }, []);\n\n    return (\n        <div>\n            <pre>{JSON.stringify(data, null, 2)}<\/pre>\n        <\/div>\n    );\n}\n\nexport default Example;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Avanc\u00e9e de useEffect<\/h3>\n\n\n\n<p>Vous pouvez \u00e9galement utiliser le Hook <code>useEffect<\/code> pour g\u00e9rer le cycle de vie du composant, par exemple en nettoyant les abonnements ou les minuteries. Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState, useEffect } from 'react';\n\nfunction Timer() {\n    const [seconds, setSeconds] = useState(0);\n\n    useEffect(() => {\n        const interval = setInterval(() => {\n            setSeconds(seconds => seconds + 1);\n        }, 1000);\n\n        return () => clearInterval(interval);\n    }, []);\n\n    return (\n        <div>\n            {seconds} secondes se sont \u00e9coul\u00e9es depuis que vous avez ouvert cette page.\n        <\/div>\n    );\n}\n\nexport default Timer;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Dessiner Composants en utilisant les Hooks de Poign\u00e9e<\/h3>\n\n\n\n<p>En utilisant les React Hooks, vous pouvez structurer de mani\u00e8re optimale la logique des composants, permettant une r\u00e9utilisabilit\u00e9 et un test plus facile du code. Voici comment utiliser les Hooks personnalis\u00e9s :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-jsx\"><code>import React, { useState, useEffect } from 'react';\n\n\/\/ Hook personnalis\u00e9 pour g\u00e9rer la fen\u00eatre\nfunction useWindowWidth() {\n    const [width, setWidth] = useState(window.innerWidth);\n\n    useEffect(() => {\n        const handleResize = () => setWidth(window.innerWidth);\n        \n        window.addEventListener('resize', handleResize);\n        \n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, []);\n\n    return width;\n}\n\nfunction WindowWidth() {\n    const width = useWindowWidth();\n\n    return (\n        <div>\n            La largeur de la fen\u00eatre est : {width}px\n        <\/div>\n    );\n}\n\nexport default WindowWidth;\n<\/code><\/pre>\n\n\n\n<p>Pour mieux comprendre la fa\u00e7on dont React facilite la gestion de l&rsquo;\u00e9tat et des cycles de vie, il est utile de comparer les <a href=\"https:\/\/wikiform.fr\/codespace\/composants-par-classe-vs-fonction-react-differences\" target=\"_blank\" rel=\"noopener\">composants par classe et les composants fonctionnels<\/a>.<\/p>\n\n\n<!-- wp:heading","protected":false},"excerpt":{"rendered":"<p>Les React Hooks r\u00e9volutionnent la mani\u00e8re dont les d\u00e9veloppeurs cr\u00e9ent et g\u00e8rent les \u00e9tats et autres fonctionnalit\u00e9s dans les composants fonctionnels de React. Comprendre et&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[23],"tags":[18],"class_list":["post-5946","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\/5946","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=5946"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5946\/revisions"}],"predecessor-version":[{"id":5947,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5946\/revisions\/5947"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/3257"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}