diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md
index e895012e7..24edcaa4b 100644
--- a/src/content/blog/2024/05/22/react-conf-2024-recap.md
+++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md
@@ -5,8 +5,6 @@ date: 2024/05/22
description: La semaine dernière nous avons organisé React Conf 2024, une conférence de deux jours à Henderson, Nevada qui a réuni plus de 700 participant·es sur place pour discuter des dernières nouveautés dans l'ingénierie d'interface utilisateur (UI). Dans cet article nous récapitulons les présentations et annonces de cet événement.
---
-{/* FIXME:L10N */}
-
Le 22 mai 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii).
---
@@ -19,108 +17,108 @@ La semaine dernière nous avons organisé React Conf 2024, une conférence de de
---
-At React Conf 2024, we announced the [React 19 RC](/blog/2024/04/25/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more.
+Lors de la React Conf 2024, nous avons annoncé [React 19 RC](/blog/2024/04/25/react-19), la [beta de la nouvelle architecture React Native](https://github.com/reactwg/react-native-new-architecture/discussions/189), et une sortie expérimentale du [React Compiler](/learn/react-compiler). La communauté est également montée sur scène pour annoncer [React Router v7](https://remix.run/blog/merging-remix-and-react-router), les [Composants Serveur universels](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) dans Expo Router, les Composants Serveur dans [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), et bien plus encore.
-The entire [day 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) and [day 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) streams are available online. In this post, we'll summarize the talks and announcements from the event.
+L'intégralité des flux pour le [jour 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) et le [jour 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) est disponible en ligne. Dans cet article, nous récapitulons les présentations et annonces de l'événement.
-## Day 1 {/*day-1*/}
+## Jour 1 {/*day-1*/}
-_[Watch the full day 1 stream here.](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=973s)_
+_[Regardez le flux intégral du jour 1 ici](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=973s)._
-To kick off day 1, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message followed by an introduction by [Seth Webster](https://twitter.com/sethwebster), who manages the React Org at Meta, and our MC [Ashley Narcisse](https://twitter.com/_darkfadr).
+Pour lancer cette première journée, le CTO de Meta [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) a souhaité la bienvenue à tou·tes puis a présenté [Seth Webster](https://twitter.com/sethwebster), qui gère les équipes React de Meta, et notre MC [Ashley Narcisse](https://twitter.com/_darkfadr).
-In the day 1 keynote, [Joe Savona](https://twitter.com/en_JS) shared our goals and vision for React to make it easy for anyone to build great user experiences. [Lauren Tan](https://twitter.com/potetotes) followed with a State of React, where she shared that React was downloaded over 1 billion times in 2023, and that 37% of new developers learn to program with React. Finally, she highlighted the work of the React community to make React, React.
+Dans la plénière d'introduction du jour 1, [Joe Savona](https://twitter.com/en_JS) a partagé nos objectifs et notre vision visant à ce que React facilite largement la création de super expériences utilisateurs. [Lauren Tan](https://twitter.com/potetotes) a suivi avec un état des lieux de React, durant lequel elle a mentionné que React a été téléchargé plus d'un milliard de fois en 2023, et que 37% des nouveaux développeurs apprennent à programmer avec React. Elle a conclu en mettant en avant le travail de la communauté React pour faire de React ce qu'il est aujourd'hui.
-For more, check out these talks from the community later in the conference:
+Pour en apprendre davantage, allez voir ces présentations de la communauté plus tard dans la conférence :
-- [Vanilla React](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=5542s) by [Ryan Florence](https://twitter.com/ryanflorence)
-- [React Rhythm & Blues](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=12728s) by [Lee Robinson](https://twitter.com/leeerob)
-- [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) by [Amy Dutton](https://twitter.com/selfteachme)
-- [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) by [Evan Bacon](https://twitter.com/Baconbrix)
+- [Vanilla React](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=5542s) par [Ryan Florence](https://twitter.com/ryanflorence)
+- [React Rhythm & Blues](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=12728s) par [Lee Robinson](https://twitter.com/leeerob)
+- [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) par [Amy Dutton](https://twitter.com/selfteachme)
+- [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) par [Evan Bacon](https://twitter.com/Baconbrix)
-Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/04/25/react-19), and see these talks for deep dives on the new features:
+Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et [Andrew Clark](https://twitter.com/acdlite) ont présenté de nouvelles fonctionnalités à venir dans React 19, et annoncé que React 19 RC était prête pour être testée en production. Découvrez toutes ces nouveautés dans [l'annonce de sortie de React 19](/blog/2024/04/25/react-19) et allez voir ces présentations qui explorent en détail les nouvelles fonctionnalités :
-- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie)
-- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff)
-- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory)
-- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
-- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://twitter.com/dan_abramov2)
-- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds)
+- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) par [Lydia Hallie](https://twitter.com/lydiahallie)
+- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) par [Sam Selikoff](https://twitter.com/samselikoff)
+- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) par [Josh Story](https://twitter.com/joshcstory)
+- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) par [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) par [Dan Abramov](https://twitter.com/dan_abramov2)
+- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) par [Kent C. Dodds](https://twitter.com/kentcdodds)
-Finally, we ended the keynote with [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei) announcing that the React Compiler is now [Open Source](https://github.com/facebook/react/pull/29061), and sharing an experimental version of the React Compiler to try out.
+Nous avons conclu la plénière avec [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya) et [Mofei Zhang](https://twitter.com/zmofei) qui ont annoncé que le React Compiler était désormais [*open source*](https://github.com/facebook/react/pull/29061) et ont mis à disposition une version expérimentale du React Compiler pour que chacun·e puisse l'essayer.
-For more information on using the Compiler and how it works, check out [the docs](/learn/react-compiler) and these talks:
+Pour en apprendre davantage sur l'utilisation du Compiler et son fonctionnement, consultez [la documentation](/learn/react-compiler) et ces présentations :
-- [Forget About Memo](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=12020s) by [Lauren Tan](https://twitter.com/potetotes)
-- [React Compiler Deep Dive](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=9313s) by [Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei)
+- [Forget About Memo](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=12020s) par [Lauren Tan](https://twitter.com/potetotes)
+- [React Compiler Deep Dive](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=9313s) par [Sathya Gunasekaran](https://twitter.com/_gsathya) et [Mofei Zhang](https://twitter.com/zmofei)
-Watch the full day 1 keynote here:
+Regardez le flux intégral du jour 1 ici :
-## Day 2 {/*day-2*/}
+## Jour 2 {/*day-2*/}
-_[Watch the full day 2 stream here.](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=1720s)_
+_[Regardez le flux intégral du jour 2 ici](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=1720s)._
-To kick off day 2, [Seth Webster](https://twitter.com/sethwebster) shared a welcome message, followed by a Thank You from [Eli White](https://x.com/Eli_White) and an introduction by our Chief Vibes Officer [Ashley Narcisse](https://twitter.com/_darkfadr).
+Pour lancer la deuxième journée, [Seth Webster](https://twitter.com/sethwebster) a souhaité la bienvenue, [Eli White](https://x.com/Eli_White) a remercié tout le monde et notre *Chief Vibes Officer* [Ashley Narcisse](https://twitter.com/_darkfadr) a fait une intro de la suite.
-In the day 2 keynote, [Nicola Corti](https://twitter.com/cortinico) shared the State of React Native, including 78 million downloads in 2023. He also highlighted apps using React Native including 2000+ screens used inside of Meta; the product details page in Facebook Marketplace, which is visited more than 2 billion times per day; and part of the Microsoft Windows Start Menu and some features in almost every Microsoft Office product across mobile and desktop.
+Dans la plénière d'introduction du jour 2, [Nicola Corti](https://twitter.com/cortinico) a fait un état des lieux de React Native, qui comptait 78 millions de téléchargements en 2023. Il a aussi mis en avant des applis basées sur React Native, notamment plus de 2 000 écrans utilisés chez Meta ; la page de détails produit de Facebook Marketplace, qui est consultée plus de 2 milliards de fois par jour ; une partie du menu Démarrer de Microsoft Windows ; et enfin certaines fonctionnalités présentes dans presque tous les produits Microsoft Office sur mobile et desktop.
-Nicola also highlighted all the work the community does to support React Native including libraries, frameworks, and multiple platforms. For more, check out these talks from the community:
+Nicola a pris soin de souligner l'immense travail fourni par la communauté pour soutenir React Native au moyen de bibliothèques, frameworks et diverses plateformes. Pour en apprendre davantage, allez voir ces présentations par la communauté :
-- [Extending React Native beyond Mobile and Desktop Apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=5798s) by [Chris Traganos](https://twitter.com/chris_trag) and [Anisha Malde](https://twitter.com/anisha_malde)
-- [Spatial computing with React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=22525s) by [Michał Pierzchała](https://twitter.com/thymikee)
+- [Extending React Native beyond Mobile and Desktop Apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=5798s) par [Chris Traganos](https://twitter.com/chris_trag) et [Anisha Malde](https://twitter.com/anisha_malde)
+- [Spatial computing with React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=22525s) par [Michał Pierzchała](https://twitter.com/thymikee)
-[Riccardo Cipolleschi](https://twitter.com/cipolleschir) continued the day 2 keynote by announcing that the React Native New Architecture is now in Beta and ready for apps to adopt in production. He shared new features and improvements in the new architecture, and shared the roadmap for the future of React Native. For more check out:
+[Riccardo Cipolleschi](https://twitter.com/cipolleschir) a poursuivi la plénière du jour 2 en annonçant que la nouvelle architecture de React Native est désormais en beta et prête à être adoptée par les applis en production. Il a présenté de nouvelles fonctionnalités et des améliorations liées à la nouvelle architecture, et partagé la feuille de route pour l'avenir de React Native. Pour plus de détails, c'est par ici :
-- [Cross Platform React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=26569s) by [Olga Zinoveva](https://github.com/SlyCaptainFlint) and [Naman Goel](https://twitter.com/naman34)
+- [Cross Platform React](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=26569s) par [Olga Zinoveva](https://github.com/SlyCaptainFlint) et [Naman Goel](https://twitter.com/naman34)
-Next in the keynote, Nicola announced that we are now recommending starting with a framework like Expo for all new apps created with React Native. With the change, he also announced a new React Native homepage and new Getting Started docs. You can view the new Getting Started guide in the [React Native docs](https://reactnative.dev/docs/next/environment-setup).
+La plénière a continué avec Nicola qui annonçait que nous conseillons désormais de démarrer avec un framework tel qu'Expo pour toute nouvelle appli créée avec React Native. Dans le cadre de ce changement d'approche, il a annoncé une refonte de la page d'accueil et du guide démarrage rapide dans la documentation. Vous pouvez consulter le nouveau guide de démarrage rapide dans la [documentation de React Native](https://reactnative.dev/docs/next/environment-setup).
-Finally, to end the keynote, [Kadi Kraman](https://twitter.com/kadikraman) shared the latest features and improvements in Expo, and how to get started developing with React Native using Expo.
+Pour finir, la plénière s'est conclue avec [Kadi Kraman](https://twitter.com/kadikraman) qui présentait les dernières nouveautés et améliorations d'Expo, et la façon de démarrer un développement React Native avec Expo.
-Watch the full day 2 keynote here:
+Regardez le flux intégral du jour 2 ici :
-## Q&A {/*q-and-a*/}
+## Q&R {/*q-and-a*/}
-The React and React Native teams also ended each day with a Q&A session:
+Les équipes React et Reaxct Native ont conclu chaque journée par une session de questions-réponses :
-- [React Q&A](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic)
-- [React Native Q&A](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren)
+- [React Q&A](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=27518s) modérée par [Michael Chan](https://twitter.com/chantastic)
+- [React Native Q&A](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=27935s) modérée par [Jamon Holmgren](https://twitter.com/jamonholmgren)
-## And more... {/*and-more*/}
+## Et plus encore… {/*and-more*/}
-We also heard talks on accessibility, error reporting, css, and more:
+Nous avons aussi eu droit à des présentations sur l'accessibilité, la gestion des erreurs, CSS et plus encore :
-- [Demystifying accessibility in React apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=20655s) by [Kateryna Porshnieva](https://twitter.com/krambertech)
-- [Pigment CSS, CSS in the server component age](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=21696s) by [Olivier Tassinari](https://twitter.com/olivtassinari)
-- [Real-time React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24070s) by [Sunil Pai](https://twitter.com/threepointone)
-- [Let's break React Rules](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=25862s) by [Charlotte Isambert](https://twitter.com/c_isambert)
-- [Solve 100% of your errors](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=19881s) by [Ryan Albrecht](https://github.com/ryan953)
+- [Demystifying accessibility in React apps](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=20655s) par [Kateryna Porshnieva](https://twitter.com/krambertech)
+- [Pigment CSS, CSS in the server component age](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=21696s) par [Olivier Tassinari](https://twitter.com/olivtassinari)
+- [Real-time React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24070s) par [Sunil Pai](https://twitter.com/threepointone)
+- [Let's break React Rules](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=25862s) par [Charlotte Isambert](https://twitter.com/c_isambert)
+- [Solve 100% of your errors](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=19881s) par [Ryan Albrecht](https://github.com/ryan953)
-## Thank you {/*thank-you*/}
+## Merci {/*thank-you*/}
-Thank you to all the staff, speakers, and participants who made React Conf 2024 possible. There are too many to list, but we want to thank a few in particular.
+Merci à toute l'équipe d'organisation, aux orateur·ices et aux participant·es qui ont rendu possible React Conf 2024. Vous êtes bien trop nombreux·ses pour vous lister, mais nous souhaitons remercier certaines personnes tout particulièrement.
-Thank you to [Barbara Markiewicz](https://twitter.com/barbara_markie), the team at [Callstack](https://www.callstack.com/), and our React Team Developer Advocate [Matt Carroll](https://twitter.com/mattcarrollcode) for helping to plan the entire event; and to [Sunny Leggett](https://zeroslopeevents.com/about) and everyone from [Zero Slope](https://zeroslopeevents.com) for helping to organize the event.
+Merci à [Barbara Markiewicz](https://twitter.com/barbara_markie), l'équipe de [Callstack](https://www.callstack.com/) et l'évangéliste développeurs de l'équipe React [Matt Carroll](https://twitter.com/mattcarrollcode) pour avoir aidé à planifier l'événement dans son ensemble ; ainsi qu'à [Sunny Leggett](https://zeroslopeevents.com/about) et toute l'équipe de [Zero Slope](https://zeroslopeevents.com) pour avoir aidé à organiser l'événement.
-Thank you [Ashley Narcisse](https://twitter.com/_darkfadr) for being our MC and Chief Vibes Officer; and to [Michael Chan](https://twitter.com/chantastic) and [Jamon Holmgren](https://twitter.com/jamonholmgren) for hosting the Q&A sessions.
+Merci à [Ashley Narcisse](https://twitter.com/_darkfadr) d'avoir été notre MC et Chief Vibes Officer, et à [Michael Chan](https://twitter.com/chantastic) et [Jamon Holmgren](https://twitter.com/jamonholmgren) d'avoir modéré les sessions de questions-réponses.
-Thank you [Seth Webster](https://twitter.com/sethwebster) and [Eli White](https://x.com/Eli_White) for welcoming us each day and providing direction on structure and content; and to [Tom Occhino](https://twitter.com/tomocchino) for joining us with a special message during the after-party.
+Merci à [Seth Webster](https://twitter.com/sethwebster) et [Eli White](https://x.com/Eli_White) de nous avoir accueillis chaque jour et d'avoir piloté la structure et le contenu, et à [Tom Occhino](https://twitter.com/tomocchino) de nous avoir rejoints pour une communication spéciale lors de l'après-soirée.
-Thank you [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) for providing detailed feedback on talks, working on slide designs, and generally filling in the gaps to sweat the details.
+Merci à [Ricky Hanlon](https://www.youtube.com/watch?v=FxTZL2U-uKg&t=1263s) pour ses retours détaillés sur les présentations, son aide au design des diapos, et d'une façon générale sa capacité à fignoler tous les derniers détails.
-Thank you [Callstack](https://www.callstack.com/) for building the conference website; and to [Kadi Kraman](https://twitter.com/kadikraman) and the [Expo](https://expo.dev/) team for building the conference mobile app.
+Merci à [Callstack](https://www.callstack.com/) d'avoir créé le site de la conférence, et à [Kadi Kraman](https://twitter.com/kadikraman) et l'équipe [Expo](https://expo.dev/) d'avoir créé l'appli mobile de la conférence.
-Thank you to all the sponsors who made the event possible: [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/), and [Vercel](https://vercel.com).
+Merci à tous les sponsors qui ont rendu l'événement possible : [Remix](https://remix.run/), [Amazon](https://developer.amazon.com/apps-and-games?cmp=US_2024_05_3P_React-Conf-2024&ch=prtnr&chlast=prtnr&pub=ref&publast=ref&type=org&typelast=org), [MUI](https://mui.com/), [Sentry](https://sentry.io/for/react/?utm_source=sponsored-conf&utm_medium=sponsored-event&utm_campaign=frontend-fy25q2-evergreen&utm_content=logo-reactconf2024-learnmore), [Abbott](https://www.jobs.abbott/software), [Expo](https://expo.dev/), [RedwoodJS](https://redwoodjs.com/) et [Vercel](https://vercel.com).
-Thank you to the AV Team for the visuals, stage, and sound; and to the Westin Hotel for hosting us.
+Merci à notre équipe AV pour les visuels, la scène et la sono, et au Westin Hotel pour nous avoir accueillis.
-Thank you to all the speakers who shared their knowledge and experiences with the community.
+Merci à tou·tes les orateur·ices qui ont partagé leurs connaissances et leur expérience avec la communauté.
-Finally, thank you to everyone who attended in person and online to show what makes React, React. React is more than a library, it is a community, and it was inspiring to see everyone come together to share and learn together.
+Pour finir, merci à celles et ceux qui ont participé sur place ou en ligne pour avoir illustré ce qui fait de React, React. React est davantage qu'une bibliothèque, c'est une communauté, et nous avons été très inspirés de voir comme tout le monde s'est rassemblé pour apprendre et partager ensemble.
-See you next time!
+À la prochaine fois !
diff --git a/src/content/reference/react/act.md b/src/content/reference/react/act.md
index 32dd81625..9d8621287 100644
--- a/src/content/reference/react/act.md
+++ b/src/content/reference/react/act.md
@@ -2,11 +2,9 @@
title: act
---
-{/* FIXME:L10N */}
-
-`act` is a test helper to apply pending React updates before making assertions.
+`act` est un utilitaire de test pour appliquer les mises à jour React en attente avant d'exécuter vos assertions.
```js
await act(async actFn)
@@ -14,10 +12,12 @@ await act(async actFn)
-To prepare a component for assertions, wrap the code rendering it and performing updates inside an `await act()` call. This makes your test run closer to how React works in the browser.
+Pour préparer un composant à vos assertions, enrobez le code qui en fait le rendu et exécute des mises à jour par un appel `await act()`. Votre test aura ainsi un comportement plus proche du véritable fonctionnement de React au sein d'un navigateur.
-You might find using `act()` directly a bit too verbose. To avoid some of the boilerplate, you could use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), whose helpers are wrapped with `act()`.
+
+Vous estimerez peut-être que le recours direct à `act()` est un peu verbeux. Pour éviter en partie ce code générique, vous pourriez utiliser une bibliothèque telle que [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), dont les utilitaires s'appuient déjà sur `act()`.
+
@@ -25,13 +25,13 @@ You might find using `act()` directly a bit too verbose. To avoid some of the bo
---
-## Reference {/*reference*/}
+## Référence {/*reference*/}
### `await act(async actFn)` {/*await-act-async-actfn*/}
-When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called `act()` that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
+Lors de l'écriture de tests pour votre interface utilisateur (UI), des tâches telles que le rendu, les événements utilisateurs ou le chargement de données sont considérées comme des « unités » d'interaction avec l'interface. React fournit un utilitaire appelé `act()` pour garantir que les mises à jour liées à ces « unités » ont bien été traitées et appliquées au DOM avant que vous n'exécutiez vos assertions.
-The name `act` comes from the [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert) pattern.
+Le nom `act` vient de l'approche [Arrange-Act-Assert](https://wiki.c2.com/?ArrangeActAssert).
```js {2,4}
it ('renders with button disabled', async () => {
@@ -44,25 +44,25 @@ it ('renders with button disabled', async () => {
-We recommend using `act` with `await` and an `async` function. Although the sync version works in many cases, it doesn't work in all cases and due to the way React schedules updates internally, it's difficult to predict when you can use the sync version.
+Nous conseillons d'utiliser `act` avec un `await` dans une fonction `async`. Même si la version synchrone fonctionne dans de nombreux cas, elle ne couvre pas tous les scénarios ; en raison de la façon dont React planifie les mises à jour en interne, il est difficile de prédire si vous pouvez utiliser la version synchrone sans risque.
-We will deprecate and remove the sync version in the future.
+Nous déprécierons puis retirerons la version synchrone à l'avenir.
-#### Parameters {/*parameters*/}
+#### Paramètres {/*parameters*/}
-* `async actFn`: An async function wrapping renders or interactions for components being tested. Any updates triggered within the `actFn`, are added to an internal act queue, which are then flushed together to process and apply any changes to the DOM. Since it is async, React will also run any code that crosses an async boundary, and flush any updates scheduled.
+* `async actFn` : une fonction asynchrone qui enrobe les rendus et interactions avec le composant que vous allez tester. Toute mise à jour déclenchée au sein de `actFn` est ajoutée à une file interne dédiée, qui est déroulée d'un bloc pour traitement, et ses résultats appliqués au DOM. Dans la mesure où elle est asynchrone, React pourra exécuter tout code asynchrone et appliquer les mises à jour qui en résultent.
-#### Returns {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
-`act` does not return anything.
+`act` ne renvoie rien.
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
-When testing a component, you can use `act` to make assertions about its output.
+Lors de tests d'un composant, vous pouvez utiliser `act` pour exprimer des assertions sur le résultat.
-For example, let’s say we have this `Counter` component, the usage examples below show how to test it:
+Par exemple, disons que vous avez le composant `Counter` suivant, les exemples d'utilisation ci-dessous illustreront comment le tester :
```js
function Counter() {
@@ -72,23 +72,23 @@ function Counter() {
}
useEffect(() => {
- document.title = `You clicked ${this.state.count} times`;
+ document.title = `Vous avez cliqué ${this.state.count} fois`;
}, [count]);
return (
-
You clicked {this.state.count} times
+
Vous avez cliqué {this.state.count} fois
)
}
```
-### Rendering components in tests {/*rendering-components-in-tests*/}
+### Faire le rendu de composants dans nos tests {/*rendering-components-in-tests*/}
-To test the render output of a component, wrap the render inside `act()`:
+Pour tester le résultat du rendu d'un composant, enrobez son rendu dans `act()` :
```js {10,12}
import {act} from 'react';
@@ -98,26 +98,26 @@ import Counter from './Counter';
it('can render and update a counter', async () => {
container = document.createElement('div');
document.body.appendChild(container);
-
- // ✅ Render the component inside act().
+
+ // ✅ Fait le rendu du composant au sein d'un `act()`.
await act(() => {
ReactDOMClient.createRoot(container).render();
});
-
+
const button = container.querySelector('button');
const label = container.querySelector('p');
- expect(label.textContent).toBe('You clicked 0 times');
- expect(document.title).toBe('You clicked 0 times');
+ expect(label.textContent).toBe('Vous avez cliqué 0 fois');
+ expect(document.title).toBe('Vous avez cliqué 0 fois');
});
```
-Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
+Dans ce code, nous créons un conteneur, l'ajoutons au document, puis faisons le rendu du composant `Counter` au sein d'un appel `act()`. Ça garantit que le composant a bien été rendu et ses Effets appliqués avant de passer aux assertions.
-Using `act` ensures that all updates have been applied before we make assertions.
+Le recours à `act()` garantit que toute mise à jour a bien été appliquée avant d'exécuter nos assertions.
-### Dispatching events in tests {/*dispatching-events-in-tests*/}
+### Déclencher des événements dans nos tests {/*dispatching-events-in-tests*/}
-To test events, wrap the event dispatch inside `act()`:
+Pour tester les événements, enrobez leur déclenchement dans `act()` :
```js {14,16}
import {act} from 'react';
@@ -132,33 +132,33 @@ it.only('can render and update a counter', async () => {
ReactDOMClient.createRoot(container).render();
});
- // ✅ Dispatch the event inside act().
+ // ✅ Déclenchement d'événement dans `act()`.
await act(async () => {
button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
});
const button = container.querySelector('button');
const label = container.querySelector('p');
- expect(label.textContent).toBe('You clicked 1 times');
- expect(document.title).toBe('You clicked 1 times');
+ expect(label.textContent).toBe('Vous avez cliqué 1 fois');
+ expect(document.title).toBe('Vous avez cliqué 1 fois');
});
```
-Here, we render the component with `act`, and then dispatch the event inside another `act()`. This ensures that all updates from the event are applied before making assertions.
+Dans ce code, nous faisons le rendu dans `act()`, puis nous déclenchons un événement dans un autre `act()`. Ça garantit que toutes les mises à jour qu'aura entraînées l'événement ont bien été appliquées avant de passer aux assertions.
-Don’t forget that dispatching DOM events only works when the DOM container is added to the document. You can use a library like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) to reduce the boilerplate code.
+N'oubliez pas que le déclenchement d'événements DOM ne fonctionne que si le conteneur DOM est bien ajouté au document. Vous pouvez utiliser une bibliothèque telle que [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) pour alléger ce code.
-## Troubleshooting {/*troubleshooting*/}
+## Dépannage {/*troubleshooting*/}
-### I'm getting an error: "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
+### J'ai une erreur : "The current testing environment is not configured to support act"(...)" {/*error-the-current-testing-environment-is-not-configured-to-support-act*/}
-Using `act` requires setting `global.IS_REACT_ACT_ENVIRONMENT=true` in your test environment. This is to ensure that `act` is only used in the correct environment.
+Le recours à `act` nécessite un réglage `global.IS_REACT_ACT_ENVIRONMENT=true` dans votre environnement de test. Ça permet de garantir que `act` n'est utilisé que dans un environnement adapté.
-If you don't set the global, you will see an error like this:
+Si vous n'avez pas défini cette globale, vous obtiendrez l'erreur suivante :
@@ -166,7 +166,9 @@ Warning: The current testing environment is not configured to support act(...)
-To fix, add this to your global setup file for React tests:
+_(« Avertissement : l'environnement de test actuel n'est pas configuré pour prendre en charge act(...) », NdT)_
+
+Pour la corriger, ajouter le code suivant dans le fichier de mise en place globale de vos tests React :
```js
global.IS_REACT_ACT_ENVIRONMENT=true
@@ -174,6 +176,6 @@ global.IS_REACT_ACT_ENVIRONMENT=true
-In testing frameworks like [React Testing Library](https://testing-library.com/docs/react-testing-library/intro), `IS_REACT_ACT_ENVIRONMENT` is already set for you.
+Les bibliothèques telles que [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) s'assurent que `IS_REACT_ACT_ENVIRONMENT` est déjà défini pour vous.
diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md
index 38fe9bec8..872e7797a 100644
--- a/src/content/reference/react/useMemo.md
+++ b/src/content/reference/react/useMemo.md
@@ -1059,11 +1059,9 @@ Gardez à l'esprit qu'il vous faut exécuter React en mode production, désactiv
---
-{/* FIXME:L10N */}
+### Empêcher qu’un Effet ne soit déclenché trop souvent {/*preventing-an-effect-from-firing-too-often*/}
-### Preventing an Effect from firing too often {/*preventing-an-effect-from-firing-too-often*/}
-
-Sometimes, you might want to use a value inside an [Effect:](/learn/synchronizing-with-effects)
+Il peut arriver que vous ayez besoin d'utiliser une valeur au sein d'un [Effet](/learn/synchronizing-with-effects) :
```js {4-7,10}
function ChatRoom({ roomId }) {
@@ -1080,7 +1078,7 @@ function ChatRoom({ roomId }) {
// ...
```
-This creates a problem. [Every reactive value must be declared as a dependency of your Effect.](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency) However, if you declare `options` as a dependency, it will cause your Effect to constantly reconnect to the chat room:
+Ce genre de cas pose problème. [Chaque valeur réactive doit être déclarée comme dépendance de votre Effet](/learn/lifecycle-of-reactive-effects#react-verifies-that-you-specified-every-reactive-value-as-a-dependency). Seulement voilà, si vous déclarez `options` comme dépendance, votre Effet va passer son temps à se reconnecter au salon de discussion :
```js {5}
@@ -1088,11 +1086,11 @@ This creates a problem. [Every reactive value must be declared as a dependency o
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [options]); // 🔴 Problem: This dependency changes on every render
+ }, [options]); // 🔴 Souci : cette dépendance change à chaque rendu
// ...
```
-To solve this, you can wrap the object you need to call from an Effect in `useMemo`:
+Pour éviter ça, vous pouvez enrober l'objet que vous avez besoin d'utiliser dans l'Effet par un `useMemo` :
```js {4-9,16}
function ChatRoom({ roomId }) {
@@ -1103,27 +1101,27 @@ function ChatRoom({ roomId }) {
serverUrl: 'https://localhost:1234',
roomId: roomId
};
- }, [roomId]); // ✅ Only changes when roomId changes
+ }, [roomId]); // ✅ Ne change que si `roomId` change
useEffect(() => {
const options = createOptions();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [options]); // ✅ Only changes when createOptions changes
+ }, [options]); // ✅ Ne change que si `options` change
// ...
```
-This ensures that the `options` object is the same between re-renders if `useMemo` returns the cached object.
+Ça garantit que l'objet `options` restera le même d'un rendu à l'autre puisque `useMemo` renverra l'objet mis en cache.
-However, since `useMemo` is performance optimization, not a semantic guarantee, React may throw away the cached value if [there is a specific reason to do that](#caveats). This will also cause the effect to re-fire, **so it's even better to remove the need for a function dependency** by moving your object *inside* the Effect:
+Ceci étant dit, puisque `useMemo` est une optimisation de performances, pas une garantie sémantique, React est susceptible de jeter la version mise en cache s'il a [une raison précise de le faire](#caveats). Ça entraînera une ré-exécution de votre Effet, **de sorte qu'il serait encore mieux d'éliminer le besoin d'une dépendance vers l'objet**, en créant l'objet *dans* l'Effet :
```js {5-8,13}
function ChatRoom({ roomId }) {
const [message, setMessage] = useState('');
useEffect(() => {
- const options = { // ✅ No need for useMemo or object dependencies!
+ const options = { // ✅ Plus besoin de useMemo ou de dépendances sur objets !
serverUrl: 'https://localhost:1234',
roomId: roomId
}
@@ -1131,11 +1129,11 @@ function ChatRoom({ roomId }) {
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
- }, [roomId]); // ✅ Only changes when roomId changes
+ }, [roomId]); // ✅ Ne change que si `roomId` change
// ...
```
-Now your code is simpler and doesn't need `useMemo`. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+À présent votre code est plus simple et n'a plus besoin de `useMemo`. [Apprenez-en davantage sur l'allègement des dépendances d'un Effet](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect).
### Mémoïser une dépendance d'un autre Hook {/*memoizing-a-dependency-of-another-hook*/}
diff --git a/src/content/reference/react/useReducer.md b/src/content/reference/react/useReducer.md
index 3d97854ed..8a7a607f8 100644
--- a/src/content/reference/react/useReducer.md
+++ b/src/content/reference/react/useReducer.md
@@ -51,15 +51,12 @@ function MyComponent() {
#### Limitations et points à noter {/*caveats*/}
-{/* FIXME:L10N (2nd item) */}
-
* `useReducer` est un Hook, vous ne pouvez donc l'appeler **qu'au niveau racine de votre composant** ou de vos propres Hooks. Vous ne pouvez pas l'appeler dans des boucles ou des conditions. Si vous avez besoin de le faire, extrayez un nouveau composant et déplacez-y l'état.
-* The `dispatch` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* La fonction `dispatch` a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* En Mode Strict, React **appellera deux fois votre réducteur et votre fonction d'initialisation** afin de [vous aider à détecter des impuretés accidentelles](#my-reducer-or-initializer-function-runs-twice). Ce comportement est limité au développement et n'affecte pas la production. Si votre réducteur et votre fonction d'initialisation sont pures (ce qui devrait être le cas), ça n'impactera pas votre logique. Le résultat de l'un des appels est ignoré.
-
---
### Fonction `dispatch` {/*dispatch*/}
diff --git a/src/content/reference/react/useState.md b/src/content/reference/react/useState.md
index 8aa787aa4..b7cd0fec1 100644
--- a/src/content/reference/react/useState.md
+++ b/src/content/reference/react/useState.md
@@ -79,15 +79,13 @@ Les fonctions de mise à jour (celles renvoyées par `useState`) n'ont pas de va
#### Limitations et points à noter {/*setstate-caveats*/}
-{/* FIXME:L10N (4th item) */}
-
* La fonction de mise à jour **ne met à jour que les variables d'état pour le *prochain* rendu**. Si vous lisez la variable d'état après avoir appelé la fonction de mise à jour, [vous obtiendrez la même ancienne valeur](#ive-updated-the-state-but-logging-gives-me-the-old-value) qui était sur votre écran avant l'appel.
* Si la nouvelle valeur que vous donnez est identique au `state` actuel, en comparant au moyen de [`Object.is`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is), React **ne fera pas un nouveau rendu de ce composant et de ses enfants**. Il s'agit d'une optimisation. Même si, dans certains cas, React a tout de même besoin d'appeler votre composant sans faire de rendu de ses enfants, ça ne devrait pas affecter votre code.
* React [met à jour les états par lots](/learn/queueing-a-series-of-state-updates). Il met à jour l'écran **après que tous les gestionnaires d'événements ont été lancés** et qu'ils auront appelé leurs fonctions de mise à jour. Ça évite des rendus inutiles suite à un unique événement. Dans les rares cas où vous auriez besoin de forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser [`flushSync`](/reference/react-dom/flushSync).
-* The `set` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* La fonction de mise à jour a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* Il est possible d'appeler la fonction de mise à jour *pendant le rendu*, mais uniquement au sein du composant en cours de rendu. React ignorera le JSX résultat pour refaire immédiatement un rendu avec le nouvel état. Cette approche est rarement nécessaire, mais vous pouvez l'utiliser pour **stocker des informations des précédents rendus**. [Voir un exemple ci-dessous](#storing-information-from-previous-renders).
diff --git a/src/content/reference/react/useTransition.md b/src/content/reference/react/useTransition.md
index fb3b11526..d3fda79fb 100644
--- a/src/content/reference/react/useTransition.md
+++ b/src/content/reference/react/useTransition.md
@@ -74,15 +74,13 @@ function TabContainer() {
#### Limitations et points à noter {/*starttransition-caveats*/}
-{/* FIXME:L10N (4th item) */}
-
* `useTransition` est un Hook, il ne peut donc être appelé qu'au sein de composants ou de Hooks personnalisés. Si vous avez besoin de démarrer une Transition à un autre endroit (par exemple, depuis une bibliothèque de gestion de données), utilisez plutôt la fonction autonome [`startTransition`](/reference/react/startTransition).
* Vous pouvez enrober une mise à jour dans une Transition uniquement si vous avez accès à la fonction `set` de l'état en question. Si vous souhaitez démarrer une Transition en réaction à une prop ou à la valeur renvoyée par un Hook personnalisé, utilisez plutôt [`useDeferredValue`](/reference/react/useDeferredValue).
* La fonction que vous passez à `startTransition` doit être synchrone. React exécute cette fonction immédiatement, et marque toutes les mises à jour demandées lors de son exécution comme des Transitions. Si vous essayez de faire des mises à jour d'état plus tard (par exemple avec un timer), elles ne seront pas marquées comme des Transitions.
-* The `startTransition` function has a stable identity, so you will often see it omitted from effect dependencies, but including it will not cause the effect to fire. If the linter lets you omit a dependency without errors, it is safe to do. [Learn more about removing Effect dependencies.](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
+* La fonction `startTransition` a une identité stable, elle ne figure donc généralement pas dans les dépendances des Effets, mais l'inclure n'entraînera pas un déclenchement d'Effet superflu. Si le *linter* vous permet de l'omettre sans erreurs, c'est que cette omission est sans danger. [Apprenez-en davantage sur l'allègement des dépendances d'Effets](/learn/removing-effect-dependencies#move-dynamic-objects-and-functions-inside-your-effect)
* Une mise à jour d'état marquée comme une Transition pourra être interrompue par d'autres mises à jour d'état. Par exemple, si vous mettez à jour un composant de graphe au sein d'une Transition, mais commencez alors une saisie dans un champ texte tandis que le graphe est en train de refaire son rendu, React redémarrera le rendu du composant graphe après avoir traité la mise à jour d'état du champ.
diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md
index 051e6ff86..9245ff511 100644
--- a/src/content/reference/rules/components-and-hooks-must-be-pure.md
+++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md
@@ -2,7 +2,7 @@
title: Les composants et les Hooks doivent être purs
---
-{/* TODO: L10N */}
+{/* FIXME:L10N */}
Pure functions only perform a calculation and nothing more. It makes your code easier to understand, debug, and allows React to automatically optimize your components and Hooks correctly.
diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md
index 4945d4ced..51ebc703b 100644
--- a/src/content/reference/rules/index.md
+++ b/src/content/reference/rules/index.md
@@ -2,7 +2,7 @@
title: Les règles de React
---
-{/* TODO: L10N */}
+{/* FIXME:L10N */}
Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications.
diff --git a/src/content/reference/rules/react-calls-components-and-hooks.md b/src/content/reference/rules/react-calls-components-and-hooks.md
index 1ec0119c6..5a0c90bd3 100644
--- a/src/content/reference/rules/react-calls-components-and-hooks.md
+++ b/src/content/reference/rules/react-calls-components-and-hooks.md
@@ -2,7 +2,7 @@
title: React appelle les composants et les Hooks
---
-{/* TODO: L10N */}
+{/* FIXME:L10N */}
React is responsible for rendering components and Hooks when necessary to optimize the user experience. It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md
index f350f006b..43cd78b0b 100644
--- a/src/content/reference/rules/rules-of-hooks.md
+++ b/src/content/reference/rules/rules-of-hooks.md
@@ -2,7 +2,7 @@
title: Les règles des Hooks
---
-{/* TODO: L10N */}
+{/* FIXME:L10N */}
Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called.