Testez-vous sur le lifecycle de React
Cela fait un petit moment que je travaille avec React.js. J'ai été candidat à des entretiens sur cette techno et j'ai moi même fait passer des entretiens. Si on testait un peu nos connaissances ?
Petit historique de React.js
React.js est une librairie fascinante. Elle a apporté une organisation et la capacité à réutiliser du code pour la composition des pages webs. Son approche orienté composant fait d'elle la reine des librairies pour coder les vues.
Notez que j'aime aussi beaucoup Angular, un peu moins Vue.js mais pour des raisons personnelles d'organisation de code.
D'après Wikipedia , les équipes de Facebook travaillaient sur React depuis 2013. Ce n'est qu'à partir de 2017 ou le marché a commencé à s'ouvrir à cette technologie, jusqu'alors utilisée par les équipes de Facebook elle même.
Pour ma part, j'ai commencé à utiliser React vers 2016, via des formations que j'avais acheté sur Udemy car j'étais en pleine recherche de performance et d'amélioration quant à mon organisation frontend. Avant mon passage à React, j'étais sur AngularJS et juste avant j'étais toujours sur du jQuery...
A cette époque React.js n'avais absolument rien à voir avec la librairie mature que l'on connait aujourd'hui. on devait utiliser des .createComponent() en ES5...
Plus tard, j'ai beaucoup aimé le passage à l'ES6 via les class components
class MyComponent extends Component {
//...
}
A ce moment là, j'étais en poste dans une société de média, et comme j'en faisait depuis maintenant un an, j'ai formé mes collègues à cette librairie. Ils ont beaucoup aimé et l'ont adopté par la suite.
La librairie a connu beaucoup de transformations depuis mes débuts dans et lorsque ces changements ont eu lieu, j'étais déjà en production sur des sites grand public. C'est pourquoi, je vais vous donner ici, ce que je pense être la clé pour bien maîtriser React.
Le lifecycle
Ou encore le cycle de vie, concerne toutes les étapes par lesquelles notre interpreteur JS va passer et effectuer des opérations.
Par exemple :
- Avant le rendu
- Après le rendu
La maîtrise du lifecycle est une notion importante afin de bien comprendre React et d'être capable d'en faire ce que l'on veut. Les React class components ont plusieurs méthodes qui permettent d'effectuer certaines opérations pendant son lifecycle.
Questions
Avec les class components, quelle méthode permet d'effectuer des opérations avant Render ?
Par quoi peut-on remplacer cette méthode depuis les Functional components ?
Tout ce qui doit être exécuté avant render peut être mis dans la fonction avant le return.
Comment faire un équialent de componentDidMount() sur un Functional component aujourd'hui ?
React.useEffect(() => {
// ... code
}, []);
Que peut-on retourner dans un hook useEffect et pourquoi le fait-on ?
Cette fonction sert à faire du nettoyage dans le cas où on utilise des événements de type listener dans le useEffect. Il convient de faire un removeListener pour éviter que les callback s'empilent. Les événements en Javascript sont gérés comme une pile (stack) qui est dépilée au moment du déclenchement.
A quoi sert l'attribut key en React ?
D'ailleurs key n'est pas utile que dans les boucles, sur Next.js, il permet de localiser un noeud commun et le remplacer s'il le faut.
FAQ
Qu'est-ce que le lifecycle dans React et pourquoi est-ce si important ?
Le lifecycle désigne toutes les étapes par lesquelles passe un composant React, comme avant ou après son rendu. Le maîtriser permet de contrôler précisément ce que fait votre composant à chaque moment de son existence et d'éviter des bugs subtils liés au timing d'exécution.
Comment reproduire componentDidMount avec un functional component ?
Il suffit d'utiliser le hook useEffect avec un tableau de dépendances vide en second argument. Le code à l'intérieur ne s'exécutera alors qu'une seule fois, juste après le premier rendu du composant.
À quoi sert la fonction de retour dans un useEffect ?
Cette fonction est l'équivalent de componentWillUnmount : elle s'exécute quand le composant est retiré du DOM. Elle sert principalement à nettoyer des listeners ajoutés dans l'effet, pour éviter que les callbacks s'accumulent en mémoire.
Peut-on remplacer componentWillMount avec un hook dans les functional components ?
Non, il n'y a pas d'équivalent direct. Tout ce qui devait s'exécuter avant le rendu peut simplement être placé dans le corps de la fonction, avant le return, ce qui est d'ailleurs plus lisible.
À quoi sert vraiment l'attribut key en React, au-delà des listes ?
Key permet à React d'identifier un nœud précis dans le DOM virtuel pour optimiser ses mises à jour. Il ne se limite pas aux boucles : dans des frameworks comme Next.js, il sert aussi à localiser un nœud commun entre deux rendus et à le remplacer si nécessaire.
Alexandre P.
Développeur passionné depuis plus de 20 ans, j'ai une appétence particulière pour les défis techniques et changer de technologie ne me fait pas froid aux yeux.
Poursuivre la lecture
