Les 5 nouveautés de React 16.6

Sous ses airs de release mineure, la version 16.6 de React sortie hier apporte son lot de nouveautés. Notamment une partie de la très attendue API Suspense mais aussi le HoC memo et la fonction lazy. Retour sur les 5 nouveautés de cette dernière version ✨

1 - Memoization avec memo

Pour rappel, il existe plusieurs moyens de créer un composant avec React :

Avec la classe Component
Permet d'utiliser le state et les méthodes de cycle de vie. Par défaut celui-ci se re-render à chaque fois (optimisation possible avec la fonction shouldComponentUpdate).

class Button extends Component {
  render() {
    return <button />
  }
}

Avec la classe PureComponent
Permet aussi d'utiliser le state et les méthodes de cycle de vie. Celui-ci se re-render uniquement si l'une de ses props a changée.

class Button extends PureComponent {
  render() {
    return <button />
  }
}

Avec une fonction (stateless component)
Permet de créer un composant sans state ni méthodes de cycle de vie. Tout comme la classe Component, ce type de composant se re-render à chaque fois.

const Button = (props) => <button />

Un composant stateless (ou functionnal component), va donc se re-render à chaque fois qu'un composant parent l'appelle. Ce comportement peut provoquer des problèmes de performance.

✨Introducing memo✨

Afin d'éviter cela nous pouvons maintenant utiliser le HoC memo qui adopte le même comportement que PureComponent :

const Button = React.memo((props = <button />))

💡Tout comme PureComponent, memo compare uniquement les propriétés au premier niveau de l'objet, si les props contiennent des objets, la vérification se base sur le pointeur de cet objet (shallow) et non sur le contenu (deep). Vous pouvez passer en deuxième argument votre propre fonction de comparaison :

memo(MyComponent, areEqual)

2 - Code splitting avec lazy

Le code-splitting permet de réduire la taille des bundles des applications en les divisant en sous bundles. Pas besoin d'envoyer à l'utilisateur du code qu'il n'utilisera sûrement pas ou bien plus tard.

Webpack gère très bien le code-splitting à condition de faire le nécessaire lors des imports de ses composants. C'est désormais chose facile avec la fonction lazy qui permet de différer le chargement :

const AdminScreen = React.lazy(() => import('./screens/AdminScreen'));

const App = () {
  return (
    <div>
      <AdminScreen />
    </div>
  );
}

Dans cet exemple, l'ensemble des dépendances du composant AdminScreen sera placé dans un bundle différent. Cela permet un gain considérable sur le bootstrap de votre application. A noter que la fonction lazy n'est pas encore supportée avec le rendu serveur (il faut alors continuer d'utiliser des librairies comme react-loadable).

3 - L'API Suspense

Autre nouveauté de cette release : l'API Suspense. Nouveauté partielle, car celle-ci n'est pas tout à fait prête concernant la partie récupération de données/cache. Cependant, vous pouvez déjà l'utiliser avec le code-splitting et donc la fonction lazy. Combiné, cela permet d'afficher simplement un loader pendant le chargement du bundle :

const AdminScreen = React.lazy(() => import('./screens/AdminScreen'))

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <AdminScreen />
      </Suspense>
    </div>
  )
}

Nous allons devoir attendre encore un peu pour pleinement utiliser cette API.

4 - Le contexte facile avec contextType

Introduit dans la version 16.3 de React la nouvelle API de contexte a généralisé l'utilisation de ce pattern dans nos applications React. Pour rappel, le contexte React permet à nos composants de s'abonner à un contexte en lecture afin d'y lire les données et éviter de passer des props de composant en composant.

En pratique, voici ce que nous devions faire avant l'introduction du contextType :

const ThemeContext = React.createContext('light')

class App extends React.Component {
  render() {
    return <ThemeContext.Provider value="light">{this.props.children}</ThemeContext.Provider>
  }
}

const Toolbar = (props) => (
  <div>
    <ThemedButton />
  </div>
)

class ThemedButton extends Component {
  render() {
    return <ThemeContext.Consumer>{(theme) => <Button theme={theme} />}</ThemeContext.Consumer>
  }
}

Avec la nouvelle propriété statique contextType, nous pouvons désormais nous affranchir du composant ThemeContext.Consumer :

class ThemedButton extends Component {
  static contextType = ThemeContext

  render() {
    return <Button theme={this.context} />
  }
}

Ici contextType va trouver automatiquement le provider le plus proche dans l'arbre ✌️.

5 - Gestion des erreurs avec getDerivedStateFromError

La version 16 de React a introduit la gestion des erreurs dans les composants grâce à la méthode componentDidCatch. Celle-ci permet d'intercepter les erreurs pour, par exemple, remonter gracieusement vos erreurs. La nouvelle fonction getDerivedStateFromError permet d'intercepter avant le re-render du composant (la fonction render retourne null lors du componentDidCatch).

D'autres nouveautés à venir…

Pour une release mineure, la version 16.6 n'a donc pas été avare en nouveautés ! Et ce n'est pas terminé, nous pouvons nous attendre à de belles surprises dans les jours à venir : le 25 et 26 octobre se déroule la React Conf au Nevada 😍.

Stay tuned ! 💪⚛️