Render Props

Qu'est-ce que les Render Props ?

Les Render Props sont une technique de partage de logique dans les composants (components, React) React. Un composant avec une props (React) de type fonction qui contrôle ce qu'il rend est appelé un composant avec "Render Props". Cela permet de réutiliser la logique de render (React) entre plusieurs composants.

Exemple concret en TypeScript

Imaginons que nous avons une logique de suivi de la position de la souris et que nous voulons la réutiliser dans plusieurs composants.

Étape 1 : Créer un composant avec Render Props

import React, { Component, ReactNode } from 'react';

interface MouseProps {
  render: (state: MouseState) => ReactNode;
}

interface MouseState {
  x: number;
  y: number;
}

class Mouse extends Component<MouseProps, MouseState> {
  constructor(props: MouseProps) {
    super(props);
    this.state = { x: 0, y: 0 };

    this.handleMouseMove = this.handleMouseMove.bind(this);
  }

  handleMouseMove(event: React.MouseEvent) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

export default Mouse;

Étape 2 : Utiliser le composant avec Render Props

Voici comment tu peux utiliser le composant Mouse pour afficher la position de la souris :

import React from 'react';
import Mouse from './Mouse';

const MouseTracker: React.FC = () => {
  return (
    <div>
      <h1>Déplace la souris autour !</h1>
      <Mouse render={({ x, y }) => (
        <p>La position de la souris est ({x}, {y})</p>
      )} />
    </div>
  );
}

export default MouseTracker;

Explications

1. Composant Mouse :

   • Ce composant garde trace de la position de la souris (x et y) dans son état local.
   • Il utilise une prop appelée render, qui est une fonction. Cette fonction est appelée avec l'état actuel de la souris (c'est-à-dire la position x et y), et ce qui est retourné par cette fonction est rendu à l'intérieur du div.

2. Composant MouseTracker :

   • Ce composant utilise le composant Mouse et lui passe une fonction via la prop render.
   • Cette fonction reçoit les coordonnées de la souris et retourne un élément JSX qui affiche ces coordonnées.

Pourquoi utiliser les Render Props ?

Les Render Props permettent de rendre des composants plus flexibles et réutilisables. Au lieu de lier la logique de rendu directement dans un composant, tu peux la déléguer à une fonction, ce qui permet de réutiliser la même logique dans différents contextes sans dupliquer le code.

Voici une liste de notions avancées que tu peux explorer pour approfondir ta compréhension et tes compétences en React et TypeScript :

1. Connaissance/Higher-Order Components :

   • Une technique avancée pour réutiliser la logique de composants. Les HOC sont des fonctions qui prennent un composant et retournent un nouveau composant.

2. Contexts API (React) :

   • Permet de partager des valeurs globales (comme le thème, l'utilisateur authentifié, etc.) sans avoir à passer explicitement des props à travers tous les niveaux de l'arborescence des composants.

3. Hooks personnalisés :

   • Les Hooks en React (comme useState, useEffect) peuvent être combinés et encapsulés dans des fonctions réutilisables appelées "Hooks personnalisés" pour encapsuler des logiques de composants complexes.

4. React-Suspense et React.lazy :

   • Techniques pour le chargement paresseux (lazy loading) des composants et autres ressources, permettant d'améliorer les performances de l'application.

5. Error Boundaries (React) :

   • Composants pour capturer les erreurs JavaScript n'importe où dans l'arborescence des composants enfants et afficher une interface de secours au lieu de planter le tout.

6. TypeScript Avancé :

   • Types conditionnels
   • types génériques
   • Types utilitaires (Partial, Pick, Omit, etc.)
   • interfaces (programmation) vs Types

7. Code Splitting :

   • Diviser le code en petits morceaux (chunks) que l'on charge au besoin, ce qui améliore les temps de chargement de l'application.

8. React.memo et useMemo :

   • Techniques pour optimiser les performances en évitant les rendus inutiles de composants.

9. Recoil / Zustand / Jotai (State Management Libraries) :

   • Bibliothèques de gestion d'état modernes et légères comme alternatives à Redux, offrant des approches plus simples et performantes.

10. Testing avec Jest et react-testing-library :

    • Tester les composants React avec des outils modernes qui permettent de s'assurer que les composants fonctionnent comme attendu.

11. Server-Side Rendering (SSR) avec Next.js :

    • Rendre les pages React sur le serveur pour améliorer le SEO et les temps de chargement initiaux.

12. Static Site Generation (SSG) avec Next.js :

    • Générer des pages statiques à la compilation pour améliorer les performances et offrir une meilleure expérience utilisateur.

Chacune de ces notions te permettra d'approfondir ta maîtrise de React et TypeScript, et de créer des applications plus robustes, performantes et maintenables. Bonne exploration !