Testez-vous sur le lifecycle de React

Testez-vous sur le lifecycle de React

Alexandre P. dans Dev - Le 08-07-2022

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 ?

Comment faire un équialent de componentDidMount() sur un Functional component aujourd'hui ?

Que peut-on retourner dans un hook useEffect et pourquoi le fait-on ?

A quoi sert l'attribut key en React ?

#react#lifecycle#questions

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


Nous utilisons des cookies sur ce site pour améliorer votre expérience d'utilisateur.