#CestFacile : Render props

On a parlé rapidement du pattern Render Props lorsque l’on a manipulé les routes de React Router. C’est une réponse aux problématiques liées aux Mixins (qui n’existent plus dans les dernières version de React) et au High Order Components.

La description issue de la documentation de React est plutôt juste, autant la repomper honteusement :

The term “render prop” refers to a simple technique for sharing code between React components using a prop whose value is a function.

Voyons-voir en quoi ça consiste en bidouillant un peu

L’idée est de pouvoir utiliser un composant avec une fonction prop, qui va nous retourner son état à travers une fonction.

Si vous n’avez rien compris, pas de panique. A priori personne ne sait décrire de façon claire en quoi consiste ce pattern autrement qu’en illustrant tout ça avec du code. Voilà un exemple très simplifié :

class Agecheck extends Component{
  state = {
    tooYoung: false
  }
  componentDidMount(){
    if( this.props.age < 18 ){
      this.setState({
        tooYoung: true
      })
    }
  }
  render(){
    return this.props.render(this.state)
  }
}

const Sexclub = () => (
  <Agecheck age={17} render={ ({tooYoung}) => {
    return tooYoung === true ? <h2>Yep, go to the Internet</h2> : <h2>Welcome !</h2>
  }} />
)

const Alcohol = () => (
  <Agecheck age={17} render={ ({tooYoung}) => {
    return tooYoung === true ? <h2>Milk is better</h2> : <h2>BEEEEEEEEEER !</h2>
  }} />
)

Ici on a une classe Agecheck qu’on va réutiliser autant qu’on le souhaite en lui passant un age et en recevant en retour un booléen.

L’intérêt de ce fonctionnement est de pouvoir réutiliser la logique de Agecheck partout où on le souhaite tout en identifiant de façon claire que cette logique provient d’un autre composant.

Un high order component fait à peu près la même chose, à la différence près qu’il est beaucoup plus difficile de comprendre d’où viennent toutes les props dès lors qu’on commence à composer avec plusieurs HOC à la fois. Sans parler des collisions possibles.

Pour illustrer un peu plus l’intérêt des render props, j’aurai pu repomper le code de cet excellent article de Hackernoon, mais tout y est déjà, alors je vais me contenter de l’embed et de le commenter :

 

On reprend l’idée du Agecheck, simplement on passe l’url d’une API et on gère son affichage dans le composant qui l’appelle.

Un sample est disponible ici :

https://github.com/GregoryBabonaux/react-c-est-facile/tree/982ca47adcf52d110cc1bf0933e3f045041aa8d2

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *