Maîtriser les design patterns React

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 :

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.

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

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.

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); 
} 

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.

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

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.

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.

function useHover() { 
  const [hovered, setHovered] = React.useState(false); ...