Tout savoir sur les propriétés de rendu de React

Qu’est-ce que la propriété de rendu en React?

Le pattern de la propriété de rendu, ou « render prop » est une méthode de création de propriété permettant le partage du code entre composants React. Cette fonction renvoie un élément React et est appelée à la place de la logique de rendu propre au composant.

Elle permet de gérer l’état local d’un composant et le partager avec ses enfants, tout en laissant la liberté à ces derniers de se rendre comme ils le souhaitent.

POURQUOI ne pas UTILISER LES propriétés de rendu?

L’inconvénient, avec les propriétés de rendu, est que, du fait de leur complexité, le code perd en lisibilité et peut ainsi devenir difficile à maintenir, surtout lorsque les composants s’imbriquent profondément.

POURQUOI UTILISER LES propriétés de rendu PLUTôT QUE LES HOCs et les Hooks?

Contrairement aux HOCS, les propriétés de rendu offrent un contrôle plus direct et une meilleure visibilité sur les données partagées. Les HOCS peuvent créer des niveaux d’abstractions supplémentaires et des conflits de nommage.

En revanche, les Hooks, sont une alternative sérieuse aux propriétés de rendu. Leur syntaxe est souvent plus lisible, elle permet aussi une intégration simplifiée du cycle de vie des composants.

Vous souhaitez devenir expert en développement d’applications performantes ? Notre formation React vous permettra de maitriser le développement d’applications monopage avec Redux et TypeScript.

L’équipe Ambient IT

Quand utiliser les propriétés de rendu ? Des exemples concrets

Il est préférable d’utiliser les propriétés de rendu lorsque vous avez besoin de flexibilité et de réutilisabilité pour le rendu des composants des enfants, tout en partageant une logique de comportement commune.

Créer des composants réutilisables

Lorsque le composant parent contrôle certains aspects de l’état, mais laisse la liberté de rendu aux enfants, la création de composants réutilisables avec la propriété de rendu est pertinente.

Un exemple classique est un composant List qui gère une liste filtrable, mais utilise une propriété de rendu pour afficher chaque élément.

Gérer les listes filtrables

Avec la propriété de rendu, vous pouvez créer un composant FilteredList gérant la logique de filtrage et acceptant une fonction de rendu pour afficher les résultats selon vos besoins.

Comment créer une propriété de rendu?

Pour cela, créez un composant qui accepte une fonction comme prop. Cette fonction est appelée avec les données nécessaires et doit retourner un élément JSX. La signature de la fonction peut varier en fonction des besoins, mais elle prend généralement la forme (data) => <JSX>.

Création du composant avec Render Prop

import React, { Component } from 'react';

class DataRenderer extends Component {
    render() {
        // Ici, 'renderProp' est la fonction que nous attendons en tant que prop.
        // Nous passons des données ('data') à cette fonction.
        const data = { message: 'Bonjour le monde!' }; // Exemple de données.

        return this.props.renderProp(data);
    }
}

Utilisation du composant « DATA RENDERER »

Nous utilisons désormais ce composant sur une autre partie de l’application. Nous lui faisons passer une fonction qui retourne un élément JSX avec les données fournies.

import React from 'react';
import ReactDOM from 'react-dom';
import DataRenderer from './DataRenderer'; // Importez le composant créé ci-dessus.

const App = () => (
    <DataRenderer renderProp={data => <div>{data.message}</div>} />
);

ReactDOM.render(<App />, document.getElementById('root'));

Comment passer des arguments à une fonction de rendu?

Pour transmettre des arguments supplémentaires à votre fonction de rendu, vous avez deux possibilités. Vous pouvez :

Passer des arguments directement lors de l’appel de la fonction

Nous créons ici, un composant « WithExtraArgs » qui accepte une fonction de rendu et transmet des arguments supplémentaires à cette fonction :

import React, { Component } from 'react';

class WithExtraArgs extends Component {
    render() {
        // Arguments supplémentaires que nous voulons passer.
        const extraArg1 = 'Hello';
        const extraArg2 = 'World';

        // Appel de la fonction de rendu avec des arguments supplémentaires.
        return this.props.render(extraArg1, extraArg2);
    }
}

Utilisation de WithExtraArgs :

import React from 'react';
import ReactDOM from 'react-dom';
import WithExtraArgs from './WithExtraArgs';

const App = () => (
    <WithExtraArgs render={(arg1, arg2) => (
        <div>{arg1} {arg2}</div>
    )} />
);

ReactDOM.render(<App />, document.getElementById('root'));

Utiliser une fonction fléchée pour englober les paramètres supplémentaires

Encapsuler des arguments supplémentaires :

import React, { Component } from 'react';

class WithExtraArgs extends Component {
    render() {
        // L'argument principal que nous voulons passer.
        const mainArg = 'Bonjour';

        // Appel de la fonction de rendu avec un argument principal.
        return this.props.render(mainArg);
    }
}

Utilisation de WithExtraArgs avec une fonction fléchée :

import React from 'react';
import ReactDOM from 'react-dom';
import WithExtraArgs from './WithExtraArgs';

const App = () => (
    <WithExtraArgs render={(mainArg) => (
        <div>{() => {
            const extraArg = 'le monde';
            return `${mainArg} ${extraArg}`;
        }()}</div>
    )} />
);

ReactDOM.render(<App />, document.getElementById('root'));

Dans la seconde solution, nous avons utilisé une fonction fléchée dans la prop « render » pour encapsuler un argument supplémentaire « extraArg ». Cela permettra d’ajouter de la flexibilité aux fonctions de rendu sans surcharger la signature de la fonction.

Performances et Render Prop

Comment les propriétés de rendu impactent-elle les performances de votre application?

L’utilisation abusive des propriétés de rendu peut entraîner des rendus inutiles et donc du code redondant. Veillez à les utiliser uniquement lorsque cela est nécessaire. Vous pouvez optimiser vos fonctions de rendu en utilisant des techniques comme React.memo ou useCallback. Vous en saurez davantage en lisant cet article expliquant ces deux méthodes.

Éviter les fonctions inline

Pour éviter les rendus inutiles, et ainsi optimiser vos performances. Il est conseillé de ne pas déclarer des fonctions de rendu inline dans le JSX et plutôt de les définir à l’extérieur du composant ou de les mémoriser avec useCallback.

Les bonnes pratiques

Comment typer les props avec TypeScript?

Avec TypeScript, vous pouvez typer les props de rendu en définissant :

• Des interfaces pour les paramètres attendus
• Les éléments JSX renvoyés

Ceci garantira la sécurité des types au sein de vos composants.

Le nommage

Une convention courante consiste à nommer les propriétés de rendu render ou children, bien que vous ayez la liberté de choisir un nom qui décrit explicitement la fonction de rendu.

Les questions fréquentes

Peut-on combiner propriété de rendu et Hooks?

Oui, il est tout à fait possible de combiner propriétés de rendu et Hooks. Vous pouvez utiliser les Hooks pour gérer l’état interne d’un composant et passer cet état à une fonction de rendu.

Peut-on combiner Propriété de rendu et Context API?

Oui, la propriété de rendu peut s’intégrer avec le Context API pour consommer des données de contexte et les passer à des composants enfants via une fonction de rendu.

Conclusion

Les hooks sont généralement conseillés aux propriétés de rendu. Il est nécessaire de se familiariser avec celles-ci afin de garder le code de votre application simple et maintenable. Néanmoins, la propriété de rendu reste un pattern pertinent lorsqu’une grande flexibilité de rendu est requise. À vous de décider la meilleure option selon votre projet, n’oubliez pas de respecter les bonnes pratiques de nommage !