Maîtriser les design patterns React

Name: React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Rating: 5 (2 reviews)

Introduction

Les design patterns sont des solutions éprouvées aux problèmes récurrents de conception de logiciels. Dans le contexte de React, les design patterns fournissent des modèles de conception et des approches pour structurer vos composants, gérer le state, gérer les interactions utilisateur et bien plus encore. Dans les différents exemples du livre, nous avons pu en voir certains, parfois sans les nommer. Cette section sera l’occasion de mieux comprendre leur fonctionnement.

Ce que vous pouvez attendre de ce chapitre

Ce chapitre mettra l’accent sur l’utilisation des patterns ainsi que sur leurs avantages et leurs limitations. Il est important de noter qu’il n’existe pas de design pattern à suivre pour coder une application React. Il peut s’agir d’un abus de langage, mais on mentionne ici différentes techniques qui sont soit mentionnées dans la documentation comme de bonnes pratiques, soit qui ont été popularisées au sein de la communauté.

React et la communauté de développeurs font constamment évoluer l’écosystème. Cela va parfois tellement vite que certains patterns ne sont plus très utilisés, mais il reste important de les comprendre au cas où vous seriez amené à les rencontrer. Nous couvrirons entre autres :

les Higher-Order Components...

Higher-Order Components

Les Higher-Order Components (HOC) sont un design pattern en React qui permet de réutiliser une certaine logique. Les HOC ne sont pas destinés à être utilisés seuls, ce sont des fonctions qui prennent un composant en argument et renvoient un nouveau composant enrichi en fonctionnalités.

1. Fonctionnement des Higher-Order Components

Voici un exemple de structure de base d’un HOC :

function withFeature(WrappedComponent) { 
  return function EnhancedComponent(props) { 
    // Ajout d'une logique ou de propriétés ici 
    return <WrappedComponent {...props} />; 
  }; 
}

Dans cet exemple, withFeature est un HOC qui enveloppe WrappedComponent et renvoie EnhancedComponent, un composant augmenté de nouvelles capacités.

Il existe une convention sur les HOC, en général ils débutent par le mot with, qui signifie « avec ». L’idée d’un HOC est de prendre un composant et de le retourner, avec quelque chose en plus.

2. Ce qu’offrent les Higher-Order Components

Les HOC possèdent deux grandes forces :

Ils permettent de partager des fonctionnalités communes entre plusieurs composants, réduisant ainsi la redondance du code.
Leur utilisation permet de diviser une application en composants indépendants, chacun...

Render props

Le design pattern Render Props est une technique qui consiste à passer une fonction en tant que prop à un composant, permettant ainsi au composant d’obtenir des données ou du comportement de cette fonction. Ce pattern favorise la réutilisabilité en permettant aux composants de partager la logique sans avoir à utiliser les Higher-Order Components.

1. Fonctionnement des render props

Le principe des render props est simple : un composant reçoit une fonction en tant que prop, généralement appelée render ou une autre fonction spécifique. Cette fonction est ensuite appelée dans le composant, permettant ainsi au composant parent de contrôler ce qui doit être rendu.

Voici un exemple basique de l’utilisation de render props :

function DataProvider({ render }) { 
  const [data, setData] = React.useState(null); 
 
  // Logique pour charger des données 
  const loadData = () => { 
    setData('Données chargées'); 
  }; 
 
  // Appel de loadData selon la logique métier... 
 
  return render(data); 
}

Dans cet exemple, DataProvider est un composant fonctionnel qui utilise une render prop render. Le composant gère un état data et appelle render...

Provider

Le design pattern Provider est une approche permettant de gérer et de partager l’état entre différents composants sans avoir à passer manuellement les données via les props.

Cette technique permet de transmettre des données ou des fonctions à travers l’arbre des composants sans avoir à les passer explicitement à chaque niveau via les props. Ce modèle utilise le contexte de React pour fournir une valeur (données ou fonctions) à des composants plus bas dans l’arbre des composants.

1. Fonctionnement du Provider Pattern

Le Provider Pattern repose sur la notion de « fournisseur » de données. Un composant Provider est placé en haut de l’arbre des composants, généralement près de la racine de l’application. Ce composant fournit un contexte qui peut être consommé par les composants enfants sans avoir à les transmettre via les props.

const MyContext = React.createContext(defaultValue); 
 
function MyProvider({ children, value }) { 
  return <MyContext.Provider value={value}>{children}</MyContext.Provider>; 
}

Dans cet exemple, MyProvider est un composant qui utilise MyContext.Provider pour passer value à ses enfants et à tous les descendants intéressés.

2. Avantages du Provider Pattern...

Composants container et de présentation

Les composants containers, également appelés « composants intelligents » ou smart components, se concentrent sur la façon dont les choses fonctionnent. Ils fournissent les données et le comportement aux composants de présentation ou à d’autres composants enfants.

Les composants de présentation, qu’on appelle aussi « composants idiots » ou dumb components, se concentrent sur l’aspect visuel de l’interface utilisateur. Ils reçoivent des données et des callbacks principalement via les props et les rendent de manière déclarative.

1. Composants container

Les composants container sont responsables de la logique et de la gestion de l’état. Ils sont souvent connectés à des sources de données externes, telles que des stores Redux ou des API. Ils prennent en charge les opérations de récupération de données, de manipulation et de mise à jour de l’état. Ils passent ensuite les données nécessaires aux composants de présentation via les props.

Voici un exemple :

function UserListContainer() { 
  const [users, setUsers] = useState([]); 
 
  React.useEffect(() => { 
    // Logique pour charger les données utilisateur ...

Hooks

Les hooks sont une innovation majeure introduite dans React pour permettre aux composants fonctionnels de gérer l’état local, les effets et d’autres fonctionnalités auparavant réservées aux composants de classe. Les hooks offrent une manière plus élégante et concise d’écrire du code React en évitant la complexité des hiérarchies de composants imbriqués et en favorisant la réutilisabilité de la logique.

1. Les bases du pattern Hooks

Le pattern Hooks en React se réfère à l’utilisation de fonctions spéciales, les hooks, pour réutiliser la logique d’état entre plusieurs composants dans une application. Cette approche est particulièrement utile pour ajouter de l’état à un composant fonctionnel, gérer la logique d’état entre plusieurs composants et gérer le cycle de vie d’un composant.

2. Hooks personnalisés

Au-delà des hooks intégrés, React permet de créer des hooks personnalisés. Ils peuvent encapsuler et partager des logiques d’état ou des comportements spécifiques, facilitant ainsi leur réutilisation dans plusieurs composants de l’application.