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.
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.
