Bonjour à tous,
J’utilise pour la première fois de façon sérieuse React pour un projet. Je me suis servi de la documentation ainsi que de diverses ressources que j’ai pu trouver sur le net, ce qui me permet de bien comprendre le fonctionnement.
Par contre au niveau de l’organisation de mes composants et de l’état qui va avec, je suis moins à l’aise. C’est pour cette raison que j’ai quelques questions à ce sujet :
Mon application est composée de 3 vues différentes, j’ai donc utilisé React Router 6 pour y intégrer une navigation entre les différentes vues. Pour le moment j’ai une partie de l’état dans un composant, une partie dans un autre etc… Mais j’ai besoin de certaines parties de l’état dans les autres composants et inversement. Est-ce que c’est logique d’en arriver là ?
Dois-je passer mon état via le routeur (je ne sais pas encore comment ce serait possible) ou dois-je intégrer mon state dans un composant plus haut ? (ce qui me paraissait plus logique)
Exemple de mon arborescence de composants incluant la navigation avec le routeur et les 3 composants qui sont mes 3 vues différentes (j’ai d’autres composants dans ces composants, je détaille plus bas) :
<App />
<MemoryRouter />
<Router />
<Routes />
<Layout />
<Outlet />
<ComposantA />
<ComposantB />
<ComposantC />
Pour le moment, j’ai un état dans ComposantA, un dans ComposantB et un dans ComposantC sauf que certaines données doivent être en commun. Dois-je remonter mon état dans le composant <App /> ? Ou le plus logique est de faire transiter cet état entre mes composants via le routeur ?
Autre chose, voici le détail de mon <ComposantA /> :
<ComposantA />
<ComposantA1 />
<ComposantA1.1 />
<ComposantA1.2 />
<ComposantA1.3 />
<ComposantA2 />
<ComposantA3 />
Ici mon <ComposantA1 /> reçoit de <ComposantA /> des données de l’état sous forme de "props" pour pouvoir les afficher. Mais j’en ai aussi besoin dans <ComposantA1.1 />, du coup je lui transmet aussi sous forme de "props". Est-ce logique de faire descendre des données de l’état de plusieurs "niveau" ? Idem avec des fonctions mettant à jour l’état. <ComposantA1.1 /> doit modifier des données de l’état, est-ce logique de passer par <ComposantA /> puis par <ComposantA1 /> pour arriver à <ComposantA1.1 /> puis faire le chemin inverse ?
Si je remonte mon état dans la composant <App />, cela va faire encore plus de descendance pour envoyer mes données. Cela vous paraît normal ou bien j’ai fait une erreur dans la conception de mon application ?
Je ne sais pas si mes explications sont très claires 
n’hésitez pas à me le dire si c’est le cas.
Merci d’avance pour vos éventuelles réponse.
EDIT : Je n’en ai pas parlé, mais j’ai aussi pensé à utiliser le LocalStorage entre mes différentes vues pour partager les données, mais je ne sais pas si c’est pertinent.
