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.

2 réponses


Salut,
Je ne connais pas la taille de ton projet et ce qu'il y a précisément dedans en terme de datas etc mais vue le nombre de composant que tu présentes je te conseillerai de partir sur l'utilisation de l'API Context de React.

Tu créer un context qui sera chargé de faire passer et mettre à jour le/les états dont tu as besoin dans les différents composants.
l'API Context est relativement simple à utiliser y'a rien de sorcier.

Le props drilling sur 3 niveaux de composants c'est vraiment vraiment la limite et encore ( perso j'essaie de stoper à 2 niveaux ).

Attention si ton projet devient volumineux par contre, les context c'est bien, mais à chaque changement d'état dans le context tout les composants enfants de ce contexte seront re rendu.
Toi seul sait si ton projet risque de devenir plus gros ou pas et si c'est le cas je te conseillerai plutôt de partir sur un autre type de gestion d'etat ( redux-toolkit/recoil/etc...)

Bon courage.

Merci d'avoir pris le temps de me répondre.

Je vais aller voir ces fameux "context" et essayer de comprendre comment ça fonctionne.
Si je juge que dans mon cas ça n'irais pas, je ferais autrement.

Encore merci