Dans le cadre de la mise en œuvre du rendu asynchrone dans React, il y a quelques méthodes de cycle de vie qui seront dépréciées dans React 17 (voir React Blog). Une méthode couramment utilisée est componentWillReceiveProps. Dans la plupart des cas, elle est utilisée pour gérer le
changement de props d’un composant.

Alors que faire ?

Une solution est d’utiliser la méthode static getDerivedStateFromProps. Il y a un grand ‘HowTo’ dev.to Post de Larry Price.

Une autre solution est d’utiliser les React Hooks, en particulier le useEffect() Hook. Cela pourrait être une solution intéressante si vous avez un petit composant et que vous voulez passer à un composant fonctionnel dans le cadre de ce changement.

Voici un exemple simple. Imaginez que nous rendions un composant de table avec une liste d’éléments. Tous les éléments doivent initialement passer par la méthode doSomething().

Code précédent

doSomething (items) { // some code to sort items ... return items}state = { items: this.props.items}componentWillReceiveProps (nextProps) { this.setState({ items: doSomething(nextProps.items) })}

avec les Hooks

const doSomething = (items) => { // some code to sort items ... return items}const = useState(doSomething(props.items))useEffect(() => { setItems(defaultSorting(items))}, )

Nous pouvons utiliser le Hook useEffect() qui par défaut s’exécute à chaque rendu. Pour éviter les appels inutiles, nous utilisons comme deuxième paramètre. Ainsi, useEffect() ne s’exécute que lorsque la propriété items a changé.

Avis important

Avant de passer à getDerivedStateFromProps() ou useEffect(), vous devriez vérifier si vous avez vraiment besoin de cette gestion de propriété. Jetez un œil à ce blogpost officiel de React pour les bugs et anti-patterns communs.

Parfois, nous écrivons certaines propriétés dans l’état même si nous n’en avons pas besoin. Si vous devez par exemple trier une liste qui provient d’une propriété, faites-le pendant le rendu et évitez de l’écrire dans l’état du composant.