⚡ 💡

Introduction à Réagir
React est une bibliothèque de framework JavaScript efficace, flexible
et open source qui permet aux développeurs de créer des applications
Web simples, rapides et évolutives. Jordan Walke, un ingénieur logiciel qui
travaillait pour Facebook, a créé React. Il a été déployé pour la première
fois sur le fil d'actualité de Facebook en 2011 et sur Instagram en 2012.
Les développeurs issus de l'arrière-plan Javascript peuvent facilement
développer des applications Web à l'aide de React.
React Hooks vous permettra d'utiliser l'état et d'autres fonctionnalités de
React dans lesquelles vous devez écrire une classe. En termes simples,
nous pouvons dire que les Hooks React sont les fonctions qui
connecteront l'état React aux fonctionnalités de cycle de vie des
composants de la fonction. React Hooks fait partie des dernières
fonctionnalités implémentées dans la version React 16.8.
Portée de React : La sélection de la bonne technologie pour le
développement d'applications ou de sites Web devient de plus en plus
difficile. React a été considéré comme le framework Javascript à la
croissance la plus rapide parmi tous. Les outils de Javascript raffermissent
leurs racines lentement et régulièrement sur le marché et la demande de
certification React augmente de façon exponentielle. React est une
victoire évidente pour les développeurs front-end car il a une courbe
d'apprentissage rapide, une abstraction propre et des composants
réutilisables. Actuellement, il n'y a pas de fin en vue pour React car il
continue d'évoluer.
Réussissez votre prochain entretien technique en toute
confiance !
Faites une simulation d'entretien gratuite, obtenez des commentaires et
des recommandations instantanés
Essayez maintenant

Réagissez aux questions d'entrevue pour les étudiants de

première année
1. Qu'est-ce que Réagir ?
React est une bibliothèque JavaScript frontale et open source qui est utile
pour développer des interfaces utilisateur spécifiquement pour les
applications avec une seule page. Il est utile pour créer des composants
d'interface utilisateur (UI) complexes et réutilisables d'applications
mobiles et Web, car il suit l'approche basée sur les composants.
Les caractéristiques importantes de React sont :
● Il prend en charge le rendu côté serveur.
● Il utilisera le DOM virtuel plutôt que le vrai DOM (Data Object Model)

car les manipulations du RealDOM sont coûteuses.

● Il suit la liaison de données unidirectionnelle ou le flux de données.
● Il utilise des composants d'interface utilisateur réutilisables ou

composables pour développer la vue.

2. Quels sont les avantages d'utiliser React ?
MVC est généralement abrégé en Model View Controller.
● Utilisation du DOM virtuel pour améliorer l'efficacité : React utilise

le DOM virtuel pour rendre la vue. Comme son nom l'indique, le DOM

virtuel est une représentation virtuelle du DOM réel. Chaque fois que
les données changent dans une application de réaction, un nouveau
DOM virtuel est créé. La création d'un DOM virtuel est beaucoup plus
rapide que le rendu de l'interface utilisateur dans le navigateur. Par
conséquent, avec l'utilisation du DOM virtuel, l'efficacité de
l'application s'améliore.
● Courbe d'apprentissage douce : React a une courbe

d'apprentissage douce par rapport à des frameworks comme

Angular. Toute personne ayant peu de connaissances en javascript
peut commencer à créer des applications Web à l'aide de React.
● SEO friendly : React permet aux développeurs de développer des

interfaces utilisateur attrayantes qui peuvent être facilement

naviguées dans divers moteurs de recherche. Il permet également le
rendu côté serveur, ce qui améliore le référencement d'une
application.
● Composants réutilisables : React utilise une architecture basée sur

des composants pour développer des applications. Les composants

sont des morceaux de code indépendants et réutilisables. Ces
composants peuvent être partagés entre diverses applications ayant
des fonctionnalités similaires. La réutilisation des composants
accélère le rythme de développement.
● Vaste écosystème de bibliothèques parmi lesquelles

choisir : React vous offre la liberté de choisir les outils, les

bibliothèques et l'architecture pour développer une application en
fonction de vos besoins.
3. Quelles sont les limites de React ?
Les quelques limitations de React sont les suivantes :
● React n'est pas un framework à part entière car ce n'est qu'une

bibliothèque.
 ● Les composants de React sont nombreux et il faudra du temps pour
saisir pleinement les bénéfices de l'ensemble.
● Il peut être difficile pour les programmeurs débutants de comprendre
React.
● Le codage peut devenir complexe car il utilisera les modèles en ligne
et JSX.

Vous pouvez télécharger une version PDF de React Interview

Questions.

Télécharger le PDF

4. Qu'est-ce que useState() dans React ?

useState() est un React Hook intégré qui vous permet d'avoir des
variables d'état dans les composants fonctionnels. Il doit être utilisé
lorsque le DOM a quelque chose qui manipule/contrôle dynamiquement.
Dans l'exemple de code ci-dessous, useState(0) renverra un tuple où le
nombre est le premier paramètre qui représente l'état actuel du compteur
et le second paramètre setCounter méthode nous permettra de mettre à
jour l'état du compteur.
...
const [count, setCounter] = useState(0);
const [otherStuffs, setOtherStuffs] = useState(...);
...
const setCount = () => {
setCounter(count + 1);
setOtherStuffs(...);
...
};
Nous pouvons utiliser la méthode setCounter() pour mettre à jour l'état de
count n'importe où. Dans cet exemple, nous utilisons setCounter() dans la
fonction setCount où diverses autres choses peuvent également être
faites. L'idée avec l'utilisation des Hooks est que nous pourrons garder
notre code plus fonctionnel et éviter les composants basés sur les classes
s'ils ne sont pas nécessaires.
5. Que sont les clés dans React ?
Une clé est un attribut de chaîne spécial qui doit être inclus lors de
l'utilisation de listes d'éléments.
Exemple de liste utilisant la clé -
const ids = [1,2,3,4,5];
const listElements = ids.map((id)=>{
return(
<li key={id.toString()}>
{id}
</li>
)
})
Importance des clés -
● Les clés aident à identifier les éléments qui ont été ajoutés, modifiés

ou supprimés.
● Des clés doivent être données aux éléments du tableau pour fournir

une identité unique à chaque élément.

● Sans clés, React ne comprend pas l'ordre ou l'unicité de chaque

élément.
● Avec les clés, React a une idée de l'élément particulier qui a été

supprimé, modifié et ajouté.

● Les clés sont généralement utilisées pour afficher une liste de

données provenant d'une API.

***Remarque : les clés utilisées dans les tableaux doivent être uniques
parmi les frères et sœurs. Ils n'ont pas besoin d'être uniques au monde.
6. Qu'est-ce que JSX ?
JSX signifie JavaScript XML. Cela nous permet d'écrire du HTML dans
JavaScript et de le placer dans le DOM sans utiliser de fonctions comme
appendChild() ou createElement().
Comme indiqué dans la documentation officielle de React, JSX fournit du
sucre syntaxique pour la fonction React.createElement().
Remarque - Nous pouvons également créer des applications de réaction
sans utiliser JSX.
Comprenons comment fonctionne JSX :
Sans utiliser JSX, nous aurions à créer un élément par le processus
suivant :
const text = React.createElement('p', {}, 'This is a text');
const container = React.createElement('div','{}',text );
ReactDOM.render(container,rootElement);
En utilisant JSX , le code ci-dessus peut être simplifié :
const container = (
<div>
<p>This is a text</p>
</div>
);
ReactDOM.render(container,rootElement);
Comme on peut le voir dans le code ci-dessus, nous utilisons directement
HTML à l'intérieur de JavaScript.
7. Quelles sont les différences entre les composants
fonctionnels et de classe ?
Avant l'introduction de Hooks dans React, les composants fonctionnels
étaient appelés composants sans état et se trouvaient derrière les
composants de classe sur la base des fonctionnalités. Après l'introduction
des Hooks, les composants fonctionnels sont équivalents aux composants
de classe.
Bien que les composants fonctionnels soient la nouvelle tendance,
l'équipe de réaction insiste pour conserver les composants de classe dans
React. Par conséquent, il est important de savoir en quoi ces composants
diffèrent.
Sur la base suivante, comparons les composants fonctionnels et de
classe :
● Déclaration

Les composants fonctionnels ne sont rien d'autre que des fonctions

JavaScript et peuvent donc être déclarés à l'aide d'une fonction fléchée
ou du mot-clé function :
function card(props){
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
 }
const card = (props) =>{
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
Les composants de classe, en revanche, sont déclarés à l'aide de la classe
ES6 :
class Card extends React.Component{
constructor(props){
super(props);
}
render(){
return(
<div className="main-container">
<h2>Title of the card</h2>
</div>
)
}
}
● Manipulation des accessoires

Rendons le composant suivant avec des accessoires et analysons

comment les composants fonctionnels et de classe gèrent les
accessoires :
<Student Info name="Vivek" rollNumber="23" />
Dans les composants fonctionnels, la manipulation des accessoires est
assez simple. Tout accessoire fourni comme argument à un composant
fonctionnel peut être directement utilisé à l'intérieur des éléments HTML :
function StudentInfo(props){
return(
<div className="main">
<h2>{props.name}</h2>
<h4>{props.rollNumber}</h4>
</div>
)
}
Dans le cas des composants de classe, les accessoires sont gérés de
manière différente :
class StudentInfo extends React.Component{
constructor(props){
super(props);
}
 render(){
return(
<div className="main">
<h2>{this.props.name}</h2>
<h4>{this.props.rollNumber}</h4> 
</div>
)
}
}
Comme nous pouvons le voir dans le code ci-dessus, ce mot-clé est
utilisé dans le cas des composants de classe.
● État de traitement

Les composants fonctionnels utilisent des Hooks React pour gérer l'état. Il
utilise le hook useState pour définir l'état d'une variable à l'intérieur du
composant :
function ClassRoom(props){
let [studentsCount,setStudentsCount] = useState(0);
const addStudent = () => {
setStudentsCount(++studentsCount);
}
return(
<div>
<p>Number of students in class room: {studentsCount}</p>
<button onClick={addStudent}>Add Student</button>
</div>
)
}
Étant donné que le Hook useState renvoie un tableau de deux éléments, le
premier élément contient l'état actuel et le second élément est une
fonction utilisée pour mettre à jour l'état.
Dans le code ci-dessus, en utilisant la déstructuration de tableau, nous
avons défini le nom de la variable sur StudentsCount avec une valeur
actuelle de "0" et setStudentsCount est la fonction utilisée pour mettre à
jour l'état.
Pour lire l'état, nous pouvons voir dans le code ci-dessus, le nom de la
variable peut être directement utilisé pour lire l'état actuel de la variable.
Nous ne pouvons pas utiliser React Hooks à l'intérieur des composants de
classe, donc la gestion de l'état est effectuée très différemment dans un
composant de classe :
Prenons le même exemple ci-dessus et convertissons-le en un composant
de classe :
class ClassRoom extends React.Component{
constructor(props){
super(props);
 this.state = {studentsCount : 0};

this.addStudent = this.addStudent.bind(this);
}

addStudent(){
this.setState((prevState)=>{
return {studentsCount: prevState.studentsCount++}
});
}

render(){
return(
<div>
<p>Number of students in class room:
{this.state.studentsCount}</p>
<button onClick={this.addStudent}>Add Student</button>
</div>
)
}
}
Dans le code ci-dessus, nous voyons que nous utilisons this.state pour
ajouter la variable StudentsCount et définir la valeur sur "0".
Pour lire l'état, nous utilisons this.state.studentsCount .
Pour mettre à jour l'état, nous devons d'abord lier la fonction addStudent
à this . Alors seulement, nous pourrons utiliser la fonction setState qui
sert à mettre à jour l'état. 
8. Qu'est-ce que le DOM virtuel ? Comment réagir utilise-
t-il le DOM virtuel pour rendre l'interface utilisateur ?
Comme indiqué par l'équipe de réaction, le DOM virtuel est un concept
dans lequel une représentation virtuelle du DOM réel est conservée dans
la mémoire et est synchronisée avec le DOM réel par une bibliothèque
telle que ReactDOM.
Pourquoi le DOM virtuel a-t-il été introduit ? 
La manipulation DOM fait partie intégrante de toute application Web, mais
la manipulation DOM est assez lente par rapport aux autres opérations en
JavaScript. L'efficacité de l'application est affectée lorsque plusieurs
manipulations du DOM sont effectuées. La plupart des frameworks
JavaScript mettent à jour l'intégralité du DOM même lorsqu'une petite
partie du DOM change.
Par exemple, considérez une liste qui est rendue à l'intérieur du DOM. Si
l'un des éléments de la liste change, la liste entière est à nouveau rendue
au lieu de simplement rendre l'élément qui a été modifié/mis à jour. C'est
ce qu'on appelle une mise à jour inefficace.
Pour résoudre le problème de la mise à jour inefficace, l'équipe de
réaction a introduit le concept de DOM virtuel.
Comment ça marche?

Pour chaque objet DOM, il existe un objet DOM virtuel correspondant

(copie), qui a les mêmes propriétés. La principale différence entre l'objet
DOM réel et l'objet DOM virtuel est que toute modification de l'objet DOM
virtuel ne se reflétera pas directement à l'écran. Considérez un objet DOM
virtuel comme un modèle de l'objet DOM réel. Chaque fois qu'un élément
JSX est rendu, chaque objet DOM virtuel est mis à jour.
**Remarque - On peut penser que la mise à jour de chaque objet DOM
virtuel peut être inefficace, mais ce n'est pas le cas. La mise à jour du
DOM virtuel est beaucoup plus rapide que la mise à jour du DOM réel
puisque nous ne faisons que mettre à jour le plan du DOM réel.
React utilise deux DOM virtuels pour rendre l'interface utilisateur. L'un
d'eux est utilisé pour stocker l'état actuel des objets et l'autre pour
stocker l'état précédent des objets. Chaque fois que le DOM virtuel est
mis à jour, react compare les deux DOM virtuels et apprend quels objets
DOM virtuels ont été mis à jour. Après avoir su quels objets ont été mis à
jour, react rend uniquement ces objets à l'intérieur du vrai DOM au lieu de
rendre le vrai DOM complet. De cette façon, avec l'utilisation du DOM
virtuel, react résout le problème de la mise à jour inefficace.
9. Quelles sont les différences entre les composants
contrôlés et non contrôlés ?
Les composants contrôlés et non contrôlés ne sont que des approches
différentes pour gérer les entrées des éléments en réaction. 
Caractéristique Incontrôlé Contrôlé Attributs de
nom
Récupération
de valeur
unique (par
exemple lors
de la
soumission)
Validation à
l'envoi
Validation au
niveau du
terrain
Désactivation
conditionnelle
du bouton
d'envoi
Application du
format
d'entrée
plusieurs
entrées pour
une donnée
entrées
dynamiques
 Application du
format
d'entrée
plusieurs
entrées pour
une donnée
entrées
dynamiques
• Composant contrôlé : dans un composant contrôlé, la valeur de
l'élément d'entrée est contrôlée par React. Nous stockons l'état de
l'élément d'entrée dans le code, et en utilisant des rappels basés sur des
événements, toute modification apportée à l'élément d'entrée sera
également reflétée dans le code.
Lorsqu'un utilisateur saisit des données dans l'élément d'entrée d'un
composant contrôlé, la fonction onChange est déclenchée et dans le
code, nous vérifions si la valeur saisie est valide ou non. Si la valeur est
valide, nous modifions l'état et restituons l'élément d'entrée avec la
nouvelle valeur.
Exemple de composant contrôlé :
function FormValidation(props) {
let [inputValue, setInputValue] = useState("");
let updateInput = e => {
setInputValue(e.target.value);
};
return (
<div>
<form>
<input type="text" value={inputValue} onChange={updateInput} />
</form>
</div>
);
}
Comme on peut le voir dans le code ci-dessus, la valeur de l'élément
d'entrée est déterminée par l'état de la variable inputValue . Toute
modification apportée à l'élément d'entrée est gérée par la
fonction updateInput .
● Composant non contrôlé : dans un composant non contrôlé, la valeur

de l'élément d'entrée est gérée par le DOM lui-même. Les éléments

d'entrée à l'intérieur des composants non contrôlés fonctionnent
comme des éléments de formulaire d'entrée HTML normaux.
L'état de l'élément d'entrée est géré par le DOM. Chaque fois que la valeur
de l'élément d'entrée est modifiée, les rappels basés sur des événements
ne sont pas appelés. Fondamentalement, réagir n'effectue aucune action
lorsque des modifications sont apportées à l'élément d'entrée.
Chaque fois que l'utilisateur saisit des données dans le champ de saisie,
les données mises à jour s'affichent directement. Pour accéder à la valeur
de l'élément d'entrée, nous pouvons utiliser ref .
Exemple de composant non maîtrisé :
function FormValidation(props) {
let inputValue = React.createRef();
let handleSubmit = e => {
alert(`Input value: ${inputValue.current.value}`);
e.preventDefault();
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" ref={inputValue} />
<button type="submit">Submit</button>
</form>
</div>
);
}
Comme on peut le voir dans le code ci-dessus, nous n'utilisons pas la
fonction onChange pour régir les modifications apportées à l'élément
d'entrée. Au lieu de cela, nous utilisons ref pour accéder à la valeur de
l'élément d'entrée. 
10. Que sont les props dans React ?
Les accessoires dans React sont les entrées d'un composant de React. Ils
peuvent être à valeur unique ou des objets ayant un ensemble de valeurs
qui seront transmises aux composants de React lors de la création en
utilisant une convention de dénomination qui ressemble presque aux
attributs de balise HTML. Nous pouvons dire que les accessoires sont les
données transmises d'un composant parent à un composant enfant.
L'objectif principal des accessoires est de fournir différentes
fonctionnalités de composants telles que :
● Transmission de données personnalisées au composant React.
● Utilisation via this.props.reactPropla méthode render() interne du

composant.
● Déclenchement des changements d'état.

Par exemple, considérons que nous créons un élément avec la propriété

reactProp comme indiqué ci-dessous : <Element reactProp = "1" />
Ce nom reactProp sera considéré comme une propriété attachée à l'objet
props natif de React qui existe déjà sur chaque composant créé à l'aide de
la bibliothèque React : props.reactProp;.
11. Expliquez l'état et les accessoires de React.
Accessoires État
Immuable Possédé par son composant
A de meilleures performances Étendue localement
Peut être transmis aux composants Inscriptible/Mutable
enfants
a la méthode setState() pour
Accessoires État
Immuable Possédé par son composant
A de meilleures performances Étendue localement
Peut être transmis aux composants Inscriptible/Mutable
enfants
a la méthode setState() pour
modifier les propriétés
Les changements d'état peuvent
être asynchrones
ne peuvent être passés que
comme accessoires
• React State
Chaque composant de react a un objet d'état intégré, qui contient toutes
les valeurs de propriété appartenant à ce composant.
En d'autres termes, l'objet d'état contrôle le comportement d'un
composant. Toute modification des valeurs de propriété de l'objet d'état
entraîne le nouveau rendu du composant.
Remarque - L'objet State n'est pas disponible dans les composants
fonctionnels, mais nous pouvons utiliser React Hooks pour ajouter un état
à un composant fonctionnel.
Comment déclarer un objet d'état ?
Exemple: 
class Car extends React.Component{
constructor(props){
super(props);
this.state = {
brand: "BMW",
color: "black"
}
}
}
Comment utiliser et mettre à jour l'objet d'état ?
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "BMW",
color: "Black"
};
}
changeColor() {
this.setState(prevState => {
return { color: "Red" };
});
}
render() {
 return (
<div>
<button onClick={() => this.changeColor()}>Change Color</button>
<p>{this.state.color}</p>
</div>
);
}
}
Comme on peut le voir dans le code ci-dessus, nous pouvons utiliser l'état
en appelant this.state.propertyName et nous pouvons modifier la
propriété de l'objet d'état à l'aide de la méthode setState .
● Réagir aux accessoires

Chaque composant React accepte un seul argument d'objet appelé props

(qui signifie "propriétés"). Ces accessoires peuvent être passés à un
composant à l'aide d'attributs HTML et le composant accepte ces
accessoires comme argument.
À l'aide d'accessoires, nous pouvons transmettre des données d'un
composant à un autre.
Passer des accessoires à un composant :
Lors du rendu d'un composant, nous pouvons transmettre les accessoires
en tant qu'attribut HTML :
<Car brand="Mercedes"/>
Le composant reçoit les accessoires :
Dans le composant Class :
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: this.props.brand,
color: "Black"
};
}
}
Dans Composant fonctionnel :
function Car(props) {
let [brand, setBrand] = useState(props.brand);
}
Remarque - Les props sont en lecture seule. Ils ne peuvent pas être
manipulés ou modifiés à l'intérieur d'un composant.
12. Expliquer les types d'effets secondaires dans le
composant React.
Il existe deux types d'effets secondaires dans le composant React. Elles
sont:
 ● Effets sans nettoyage : cet effet secondaire sera utilisé dans
useEffect qui n'empêche pas le navigateur de mettre à jour l'écran. Il
améliore également la réactivité d'une application. Quelques exemples
courants sont les requêtes réseau, la journalisation, les mutations
manuelles du DOM, etc.
● Effets avec nettoyage : certains des effets Hook nécessiteront un
nettoyage après la mise à jour du DOM. Par exemple, si vous souhaitez
configurer un abonnement à une source de données externe, cela
nécessite de nettoyer la mémoire, sinon il pourrait y avoir un problème
de fuite de mémoire. C'est un fait connu que React effectuera le
nettoyage de la mémoire lors du démontage des composants. Mais les
effets s'exécuteront pour chaque méthode render() plutôt que pour
une méthode spécifique. Ainsi, nous pouvons dire qu'avant l'exécution
des effets, le React nettoiera également les effets du rendu précédent.
13. Qu'est-ce que le prop drill dans React ?

Parfois, lors du développement d'applications React, il est nécessaire de

transmettre des données d'un composant situé plus haut dans la
hiérarchie à un composant profondément imbriqué. Pour transmettre des
données entre de tels composants, nous passons les accessoires d'un
composant source et continuons à transmettre l'accessoire au composant
suivant dans la hiérarchie jusqu'à ce que nous atteignions le composant
profondément imbriqué.
L' inconvénient de l'utilisation du forage à hélice est que les composants
qui ne devraient autrement pas être au courant des données ont accès
aux données.
14. Que sont les limites d'erreur ?
Introduites dans la version 16 de React, les limites d'erreur nous
permettent de détecter les erreurs qui se produisent lors de la phase de
rendu.
● Qu'est-ce qu'une limite d'erreur ?

Tout composant qui utilise l'une des méthodes de cycle de vie suivantes
est considéré comme une limite d'erreur.
À quels endroits une limite d'erreur peut-elle détecter une erreur ?
 . Phase de rendu
. À l'intérieur d'une méthode de cycle de vie
. A l'intérieur du constructeur
Sans utiliser les limites d'erreur :
class CounterComponent extends React.Component{
constructor(props){
super(props);
this.state = {
counterValue: 0
}
this.incrementCounter = this.incrementCounter.bind(this);
}
incrementCounter(){
this.setState(prevState => counterValue = prevState+1);
}
render(){
if(this.state.counter === 2){
throw new Error('Crashed');
}
return(
<div>
<button onClick={this.incrementCounter}>Increment Value</button>
<p>Value of counter: {this.state.counterValue}</p>
</div>
)
}
}
Dans le code ci-dessus, lorsque le counterValue est égal à 2, nous
lançons une erreur dans la méthode de rendu.
Lorsque nous n'utilisons pas la limite d'erreur, au lieu de voir une erreur,
nous voyons une page vierge. Étant donné que toute erreur dans la
méthode de rendu entraîne le démontage du composant. Pour afficher
une erreur qui se produit à l'intérieur de la méthode de rendu, nous
utilisons des limites d'erreur.
Avec limites d'erreur : comme mentionné ci-dessus, la limite d'erreur est
un composant utilisant l'une ou les deux méthodes suivantes : static
getDerivedStateFromError et componentDidCatch.
Créons une limite d'erreur pour gérer les erreurs dans la phase de rendu :
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
 return { hasError: true }; 
}
componentDidCatch(error, errorInfo) {
logErrorToMyService(error, errorInfo); 
}
render() {
if (this.state.hasError) {
return <h4>Something went wrong</h4>
}
return this.props.children;
}
}
Dans le code ci-dessus, la fonction getDerivedStateFromError rend
l'interface utilisateur de secours lorsque la méthode de rendu a une
erreur.
componentDidCatch enregistre les informations d'erreur dans un service
de suivi des erreurs.
Maintenant, avec la limite d'erreur, nous pouvons rendre le
CounterComponent de la manière suivante :
<ErrorBoundary>
<CounterComponent/>
</ErrorBoundary>
15. Qu'est-ce que React Hooks ?
React Hooks sont les fonctions intégrées qui permettent aux
développeurs d'utiliser les méthodes d'état et de cycle de vie dans les
composants React. Ce sont de nouvelles fonctionnalités ajoutées
disponibles dans la version 16.8 de React. Chaque cycle de vie d'un
composant comporte 3 phases qui incluent le montage, le démontage et
la mise à jour. Parallèlement à cela, les composants ont des propriétés et
des états. Les Hooks permettront aux développeurs d'utiliser ces
méthodes pour améliorer la réutilisation du code avec une plus grande
flexibilité dans la navigation dans l'arborescence des composants.
En utilisant Hook, toutes les fonctionnalités de React peuvent être
utilisées sans écrire de composants de classe. Par exemple , avant la
version 16.8 de React, il fallait un composant de classe pour gérer l'état
d'un composant. Mais maintenant, en utilisant le Hook useState, nous
pouvons conserver l'état dans un composant fonctionnel.
16. Expliquez React Hooks.
Que sont les Hooks ? Les Hooks sont des fonctions qui nous permettent
de «raccrocher» l'état de React et les fonctionnalités du cycle de vie à
partir d'un composant fonctionnel.
Les React Hooks ne peuvent pas être utilisés dans les composants de
classe. Ils nous permettent d'écrire des composants sans classe.
Pourquoi les Hooks ont-ils été introduits dans React ?
Les Hooks React ont été introduits dans la version 16.8 de
React. Auparavant, les composants fonctionnels étaient appelés
composants sans état. Seuls les composants de classe ont été utilisés
pour la gestion des états et les méthodes de cycle de vie. La nécessité de
changer un composant fonctionnel en composant de classe, chaque fois
que des méthodes de gestion d'état ou de cycle de vie devaient être
utilisées, a conduit au développement de Hooks.
Exemple de hook : useState hook :
Dans les composants fonctionnels, le Hook useState nous permet de
définir un état pour un composant :
function Person(props) {
// We are declaring a state variable called name.
// setName is a function to update/change the value of name
let [name, setName] = useState('');
}
La variable d'état "name" peut être directement utilisée dans le HTML. 
17. Quelles sont les règles à suivre lors de l'utilisation de
React Hooks ?
Il y a 2 règles qui doivent être suivies lorsque vous codez avec des Hooks :
● React Hooks doit être appelé uniquement au niveau supérieur. Il n'est

pas permis de les appeler à l'intérieur des fonctions, boucles ou

conditions imbriquées.
● Il est autorisé d'appeler les Hooks uniquement à partir des

composants de la fonction React.

18. À quoi servent les Hooks useEffect React?
Le Hook useEffect React est utilisé pour effectuer les effets secondaires
dans les composants fonctionnels. Avec l'aide de useEffect, vous
informerez React que votre composant nécessite que quelque chose soit
fait après le rendu du composant ou après un changement d'état. La
fonction que vous avez passée (peut être appelée "effet") sera mémorisée
par React et appelée après la fin des mises à jour DOM. En utilisant cela,
nous pouvons effectuer divers calculs tels que la récupération de
données, la configuration du titre du document, la manipulation directe du
DOM, etc., qui ne ciblent pas la valeur de sortie. Le Hook useEffect
s'exécutera par défaut après le premier rendu et également après chaque
mise à jour du composant. React garantira que le DOM sera mis à jour au
moment où l'effet sera exécuté.
Le hook useEffect React acceptera 2 arguments :useEffect(callback[,
dependencies]);
Où le rappel du premier argument représente la fonction ayant la logique
d'effet secondaire et il sera immédiatement exécuté après que les
modifications aient été poussées vers DOM. Les dépendances du
deuxième argument représentent un tableau facultatif de
dépendances. useEffect() exécutera le rappel uniquement s'il y a un
changement dans les dépendances entre les rendus.
Exemple:
import { useEffect } from 'react';
function WelcomeGreetings({ name }) {
const msg = `Hi, ${name}!`; // Calculates output
useEffect(() => {
document.title = `Welcome to you ${name}`; // Side-effect!
}, [name]);
return <div>{msg}</div>; // Calculates output
}
Le code ci-dessus mettra à jour le titre du document qui est considéré
comme un effet secondaire car il ne calculera pas directement la sortie du
composant. C'est pourquoi la mise à jour du titre du document a été
placée dans un rappel et fournie à useEffect().
Considérez que vous ne souhaitez pas exécuter la mise à jour du titre du
document à chaque fois lors du rendu du composant WelcomeGreetings
et que vous souhaitez qu'il soit exécuté uniquement lorsque le prop de
nom change, vous devez alors fournir le nom en tant que dépendance
à useEffect(callback, [name]).
19. Pourquoi React Hooks utilise-t-il des références ?
Auparavant, les références n'étaient limitées qu'aux composants de
classe, mais elles peuvent désormais également être accessibles dans les
composants de fonction via le Hook useRef dans React.
Les références sont utilisées pour :
● Gestion de la mise au point, de la lecture multimédia ou de la sélection

de texte.
● Intégration avec les bibliothèques DOM par des tiers.
● Déclenchement des animations impératives.

20. Que sont les Hooks personnalisés ?

Un Custom Hook est une fonction en Javascript dont le nom commence
par 'use' et qui appelle d'autres hooks. Il fait partie de la mise à jour du
hook React v16.8 et vous permet de réutiliser la logique avec état sans
avoir besoin de restructurer la hiérarchie des composants.
Dans presque tous les cas, les Hooks personnalisés sont considérés
comme suffisants pour remplacer les accessoires de rendu et les HoC
(composants d'ordre supérieur) et réduire la quantité d'imbrication
requise. Les Hooks personnalisés vous permettront d'éviter plusieurs
couches d'abstraction ou d'enfer qui pourraient accompagner les Render
Props et HoCs.
L' inconvénient des Hooks personnalisés est qu'ils ne peuvent pas être
utilisés à l'intérieur des classes.
Réagissez aux questions d'entrevue pour les
expérimentés
21. Expliquez le mode strict dans React.
StrictMode est un outil ajouté dans la version 16.3 de React pour mettre
en évidence les problèmes potentiels dans une application. Il effectue des
vérifications supplémentaires sur l'application.
function App() {
return (
<React.StrictMode>
<div classname="App">
<Header/>
<div>
Page Content
</div>
<Footer/>
</div>
</React.StrictMode>
);
}
Pour activer StrictMode, les <React.StrictMode>balises doivent être
ajoutées dans l'application :
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
rootElement
);
StrictMode aide actuellement avec les problèmes suivants :
● Identification des composants avec des méthodes de cycle de vie

non sécurisées : 
○ Certaines méthodes de cycle de vie ne sont pas sûres à utiliser

dans les applications de réaction asynchrones. Avec l'utilisation de

bibliothèques tierces, il devient difficile de s'assurer que certaines
méthodes de cycle de vie ne sont pas utilisées.
○ StrictMode aide à nous fournir un avertissement si l'un des

composants de la classe utilise une méthode de cycle de vie non

sécurisée.
● Avertissement concernant l'utilisation de l'ancienne API de

chaîne :
 ○ Si l'on utilise une ancienne version de React, la référence de
rappel est la méthode recommandée pour gérer les références au
lieu d'utiliser la chaîne refs . StrictMode donne un avertissement
si nous utilisons des références de chaîne pour gérer les
références.
● Avertissement sur l'utilisation de findDOMNode :
○ Auparavant, la méthode findDOMNode() était utilisée pour

rechercher l'arborescence d'un nœud DOM. Cette méthode est

obsolète dans React. Par conséquent, le StrictMode nous donne
un avertissement sur l'utilisation de cette méthode.
● Avertissement concernant l'utilisation de l'API contextuelle
héritée (car l'API est sujette aux erreurs).
22. Comment empêcher les re-rendus dans React ?
● Raison des re-rendus dans React :
○ Le re-rendu d'un composant et de ses composants enfants se

produit lorsque les accessoires ou l'état du composant ont été

modifiés.
○ Le rendu des composants qui ne sont pas mis à jour affecte les

performances d'une application.

● Comment empêcher le re-rendu :

Considérez les composants suivants :

class Parent extends React.Component {
state = { messageDisplayed: false };
componentDidMount() {
this.setState({ messageDisplayed: true });
}
render() {
console.log("Parent is getting rendered");
return (
<div className="App">
<Message />
</div>
);
}
}
class Message extends React.Component {
constructor(props) {
super(props);
this.state = { message: "Hello, this is vivek" };
}
render() {
console.log("Message is getting rendered");
return (
 <div>
<p>{this.state.message}</p>
</div>
);
}
}
●Le composant Parent est le composant parent et le Message est le
composant enfant. Toute modification du composant parent entraînera
également un nouveau rendu du composant enfant. Pour empêcher le
nouveau rendu des composants enfants, nous utilisons la méthode
shouldComponentUpdate() :
**Remarque - Utilisez la méthode shouldComponentUpdate() uniquement
lorsque vous êtes sûr qu'il s'agit d'un composant statique.
class Message extends React.Component {
constructor(props) {
super(props);
this.state = { message: "Hello, this is vivek" };
}
shouldComponentUpdate() {
console.log("Does not get rendered");
return false;
}
render() {
console.log("Message is getting rendered");
return (
<div>
<p>{this.state.message}</p>
</div>
);
}
}
Comme on peut le voir dans le code ci-dessus, nous avons
retourné false à partir de la méthode shouldComponentUpdate(), qui
empêche le composant enfant de se restituer. 
23. Quelles sont les différentes manières de styliser un
composant React ?
Il existe de nombreuses façons différentes de styliser un composant
React. Certains des moyens sont:
● Style en ligne : nous pouvons directement styliser un élément à l'aide

d'attributs de style en ligne. Assurez-vous que la valeur de style est un

objet JavaScript :
class RandomComponent extends React.Component {
render() {
 return (
<div>
<h3 style={{ color: "Yellow" }}>This is a heading</h3>
<p style={{ fontSize: "32px" }}>This is a paragraph</p>
</div>
);
}
}
Utilisation d'un objet JavaScript : nous pouvons créer un objet
●

JavaScript séparé et définir les propriétés de style souhaitées. Cet

objet peut être utilisé comme valeur de l'attribut de style en ligne.
class RandomComponent extends React.Component {
paragraphStyles = {
color: "Red",
fontSize: "32px"
};

headingStyles = {
color: "blue",
fontSize: "48px"
};

render() {
return (
<div>
<h3 style={this.headingStyles}>This is a heading</h3>
<p style={this.paragraphStyles}>This is a paragraph</p>
</div>
);
}
}
● Feuille de style CSS : nous pouvons créer un fichier CSS séparé et

écrire tous les styles du composant à l'intérieur de ce fichier. Ce

fichier doit être importé dans le fichier du composant.
import './RandomComponent.css';

class RandomComponent extends React.Component {

render() {
return (
<div>
<h3 className="heading">This is a heading</h3>
<p className="paragraph">This is a paragraph</p>
</div>
);
 }
}
Modules CSS : Nous pouvons créer un module CSS séparé et
●

importer ce module dans notre composant. Créez un fichier avec

l'extension ".module.css", styles.module.css :
.paragraph{
color:"red";
border:1px solid black;
}
Nous pouvons importer ce fichier dans le composant et l'utiliser :
import styles from './styles.module.css';

class RandomComponent extends React.Component {

render() {
return (
<div>
<h3 className="heading">This is a heading</h3>
<p className={styles.paragraph} >This is a paragraph</p>
</div>
);
}
}
24. Nommez quelques techniques pour optimiser les
performances de l'application React.
Il existe de nombreuses façons d'optimiser les performances d'une
application React, examinons-en quelques-unes :
● Utilisation de useMemo( ) -
○ Il s'agit d'un hook React utilisé pour la mise en cache des

fonctions gourmandes en CPU.

○ Parfois, dans une application React, une fonction CPU-Cher est

appelée à plusieurs reprises en raison des nouveaux rendus d'un

composant, ce qui peut entraîner un rendu lent.
Le hook useMemo() peut être utilisé pour mettre en cache de
telles fonctions. En utilisant useMemo(), la fonction CPU-Coûteuse
n'est appelée que lorsqu'elle est nécessaire.
● Utilisation de React.PureComponent -
○ Il s'agit d'une classe de composants de base qui vérifie l'état et les

accessoires d'un composant pour savoir si le composant doit être

mis à jour.
○ Au lieu d'utiliser le simple React.Component, nous pouvons utiliser

React.PureComponent pour réduire inutilement les rendus d'un

composant.
● Maintien de la colocation de l'État -
 ○ Il s'agit d'un processus de déplacement de l'état aussi près que
possible de l'endroit où vous en avez besoin.
○ Parfois, dans l'application React, nous avons beaucoup d'états

inutiles à l'intérieur du composant parent, ce qui rend le code

moins lisible et plus difficile à maintenir. N'oubliez pas que le fait
d'avoir de nombreux états dans un seul composant entraîne des
re-rendus inutiles pour le composant.
○ Il est préférable de déplacer les états qui ont moins de valeur pour

le composant parent vers un composant séparé.

● Chargement paresseux -
○  C'est une technique utilisée pour réduire le temps de chargement

d'une application React. Le chargement différé permet de réduire

au minimum le risque de performances des applications Web.
25. Comment transmettre des données entre les
composants de réaction ?

Composant parent vers composant enfant (à l'aide d'accessoires)

À l'aide d'accessoires, nous pouvons envoyer des données d'un parent à
un composant enfant.
Comment faisons-nous cela?
Considérez le composant parent suivant :
import ChildComponent from "./Child";
function ParentComponent(props) {
let [counter, setCounter] = useState(0);

let increment = () => setCounter(++counter);

return (
<div>
<button onClick={increment}>Increment Counter</button>
<ChildComponent counterValue={counter} />
</div>
);
}
Comme on peut le voir dans le code ci-dessus, nous rendons le
composant enfant à l'intérieur du composant parent, en fournissant un
accessoire appelé counterValue. La valeur du compteur est transmise du
composant parent au composant enfant.
Nous pouvons utiliser les données transmises par le composant parent de
la manière suivante :
function ChildComponent(props) {
return (
<div>
<p>Value of counter: {props.counterValue}</p>
</div>
);
}
Nous utilisons props.counterValue pour afficher les données transmises
par le composant parent.
Composant enfant vers composant parent (à l'aide de rappels)
Celui-ci est un peu délicat. Nous suivons les étapes ci-dessous :
● Créez un rappel dans le composant parent qui prend les données

nécessaires en tant que paramètre.

● Transmettez ce rappel comme accessoire au composant enfant.
● Envoyez des données à partir du composant enfant à l'aide du rappel.

Nous considérons le même exemple ci-dessus mais dans ce cas, nous

allons passer la counterValue mise à jour de l'enfant au parent.
Étape 1 et Étape 2 : créez un rappel dans le composant parent,
transmettez ce rappel comme accessoire.
function ParentComponent(props) {
let [counter, setCounter] = useState(0);
let callback = valueFromChild => setCounter(valueFromChild);
return (
<div>
<p>Value of counter: {counter}</p>
<ChildComponent callbackFunc={callback} counterValue={counter} />
</div>
);
}
Comme on peut le voir dans le code ci-dessus, nous avons créé une
fonction appelée callback qui prend en paramètre les données reçues du
composant enfant.
Ensuite, nous avons passé le rappel de la fonction en tant que prop au
composant enfant.
Étape 3 : Transmettez les données du composant enfant au composant
parent.
function ChildComponent(props) {
let childCounterValue = props.counterValue;
return (
<div>
<button onClick={() => props.callbackFunc(++childCounterValue)}>
 Increment Counter
</button>
</div>
);
}
Dans le code ci-dessus, nous avons utilisé props.counterValue et l'avons
défini sur une variable appelée childCounterValue.
Ensuite, en cliquant sur le bouton, nous transmettons la childCounterValue
incrémentée au props.callbackFunc .
De cette façon, nous pouvons transmettre des données du composant
enfant au composant parent. 
26. Que sont les composants d'ordre supérieur ?
En termes simples, le composant d'ordre supérieur (HOC) est une
fonction qui prend un composant et renvoie un nouveau composant. 

Quand avons-nous besoin d'un composant d'ordre supérieur ?

Lors du développement d'applications React, nous pouvons développer
des composants assez similaires les uns aux autres avec des différences
infimes. Dans la plupart des cas, développer des composants similaires
peut ne pas être un problème mais, tout en développant des applications
plus grandes, nous devons garder notre code DRY , par conséquent, nous
voulons une abstraction qui nous permette de définir cette logique en un
seul endroit et de la partager entre les composants. HOC nous permet de
créer cette abstraction.
Exemple de HOC :
Considérez les composants suivants ayant des fonctionnalités
similaires. Le composant suivant affiche la liste des articles :
// "GlobalDataSource" is some global data source
class ArticlesList extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
articles: GlobalDataSource.getArticles(),
 };
}
componentDidMount() {
// Listens to the changes added
GlobalDataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// Listens to the changes removed
GlobalDataSource.removeChangeListener(this.handleChange);
}
handleChange() {
// States gets Update whenver data source changes
this.setState({
articles: GlobalDataSource.getArticles(),
});
}
render() {
return (
<div>
{this.state.articles.map((article) => (
<ArticleData article={article} key={article.id} />
))}
</div>
);
}
}
Le composant suivant affiche la liste des utilisateurs :
// "GlobalDataSource" is some global data source
class UsersList extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
users: GlobalDataSource.getUsers(),
};
}
componentDidMount() {
// Listens to the changes added
GlobalDataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// Listens to the changes removed
GlobalDataSource.removeChangeListener(this.handleChange);
}
 handleChange() {
// States gets Update whenver data source changes
this.setState({
users: GlobalDataSource.getUsers(),
});
}
render() {
return (
<div>
{this.state.users.map((user) => (
<UserData user={user} key={user.id} />
))}
</div>
);
}
}
Notez que les composants ci-dessus ont tous deux des fonctionnalités
similaires, mais ils appellent des méthodes différentes vers un point de
terminaison d'API.
Créons un composant d'ordre supérieur pour créer une abstraction :
// Higher Order Component which takes a component
// as input and returns another component
// "GlobalDataSource" is some global data source
function HOC(WrappedComponent, selectData) {
return class extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {
data: selectData(GlobalDataSource, props),
};
}
componentDidMount() {
// Listens to the changes added
GlobalDataSource.addChangeListener(this.handleChange);
}
componentWillUnmount() {
// Listens to the changes removed
GlobalDataSource.removeChangeListener(this.handleChange);
}
handleChange() {
this.setState({
data: selectData(GlobalDataSource, this.props),
});
 }
render() {
// Rendering the wrapped component with the latest data data
return <WrappedComponent data={this.state.data} {...this.props} />;
}
};
}
Nous savons que HOC est une fonction qui prend un composant et
renvoie un composant.
Dans le code ci-dessus, nous avons créé une fonction appelée HOC qui
renvoie un composant et exécute des fonctionnalités qui peuvent être
partagées à la fois entre le composant ArticlesList et le
composant UsersList .
Le deuxième paramètre de la fonction HOC est la fonction qui appelle la
méthode sur le point de terminaison de l'API.
Nous avons réduit le code dupliqué des
fonctions componentDidUpdate et componentDidMount .
En utilisant le concept de composants d'ordre supérieur, nous pouvons
maintenant rendre les composants ArticlesList et UsersList de la
manière suivante :
const ArticlesListWithHOC = HOC(ArticlesList, (GlobalDataSource) =>
GlobalDataSource.getArticles());
const UsersListWithHOC = HOC(UsersList, (GlobalDataSource) =>
GlobalDataSource.getUsers());
N'oubliez pas que nous n'essayons pas de modifier la fonctionnalité de
chaque composant, nous essayons de partager une seule fonctionnalité
entre plusieurs composants à l'aide de HOC. 
27. Quelles sont les différentes phases du cycle de vie des
composants ?
Il existe quatre phases différentes dans le cycle de vie du composant
React. Elles sont:
● Initialisation : Au cours de cette phase, le composant React se

préparera en configurant les accessoires par défaut et l'état initial

pour le voyage difficile à venir.
● Montage : le montage fait référence à la mise en place des éléments

dans le DOM du navigateur. Étant donné que React utilise VirtualDOM,

l'ensemble du DOM du navigateur actuellement rendu ne serait pas
actualisé. Cette phase comprend les méthodes de cycle de
vie componentWillMountet componentDidMount.
● Mise à jour : Dans cette phase, un composant sera mis à jour lorsqu'il

y a un changement dans l'état ou les accessoires d'un

composant. Cette phase aura des méthodes de cycle de vie telles
que componentWillUpdate, shouldComponentUpdate, renderet compo
 nentDidUpdate.
● Démontage : dans cette dernière phase du cycle de vie du
composant, le composant sera supprimé du DOM ou sera démonté du
DOM du navigateur. Cette phase aura la méthode de cycle de vie
nommée componentWillUnmount.

28. Quelles sont les méthodes de cycle de vie de React ?

Les hooks de cycle de vie React auront les méthodes qui seront
automatiquement appelées à différentes phases du cycle de vie du
composant et offrent ainsi un bon contrôle sur ce qui se passe au point
invoqué. Il fournit le pouvoir de contrôler et de manipuler efficacement ce
qui se passe tout au long du cycle de vie des composants.
Par exemple, si vous développez l'application YouTube, l'application
utilisera un réseau pour mettre en mémoire tampon les vidéos et
consommera l'énergie de la batterie (supposez uniquement ces
deux). Après avoir lu la vidéo, si l'utilisateur passe à une autre application,
vous devez vous assurer que les ressources telles que le réseau et la
batterie sont utilisées le plus efficacement possible. Vous pouvez arrêter
ou mettre en pause la mise en mémoire tampon de la vidéo qui, à son tour,
arrête l'utilisation de la batterie et du réseau lorsque l'utilisateur passe à
une autre application après la lecture de la vidéo.
Nous pouvons donc dire que le développeur sera capable de produire une
application de qualité à l'aide de méthodes de cycle de vie et cela aide
également les développeurs à s'assurer de planifier quoi et comment le
faire à différents points de naissance, de croissance ou de mort des
interfaces utilisateur .
Les différentes méthodes de cycle de vie sont :
● constructor(): Cette méthode sera appelée lorsque le composant est

lancé avant que quoi que ce soit n'ait été fait. Il aide à configurer l'état
initial et les valeurs initiales.
 ● getDerivedStateFromProps(): Cette méthode sera appelée juste avant
le rendu des éléments dans le DOM. Cela aide à configurer l'objet
d'état en fonction des accessoires initiaux. La méthode
getDerivedStateFromProps() aura un état comme argument et renvoie
un objet qui a modifié l'état. Ce sera la première méthode à être
appelée lors d'une mise à jour d'un composant.
● render(): Cette méthode affichera ou restituera le code HTML dans le
DOM avec de nouvelles modifications. La méthode render() est une
méthode essentielle et sera toujours appelée tandis que les méthodes
restantes sont facultatives et ne seront appelées que si elles sont
définies.
● componentDidMount(): Cette méthode sera appelée après le rendu du
composant. En utilisant cette méthode, vous pouvez exécuter des
instructions qui nécessitent que le composant soit déjà conservé dans
le DOM.
● shouldComponentUpdate(): La valeur booléenne sera renvoyée par
cette méthode qui précisera si React doit poursuivre le rendu ou
non. La valeur par défaut de cette méthode sera True.
● getSnapshotBeforeUpdate(): Cette méthode fournira un accès aux
accessoires ainsi qu'à l'état avant la mise à jour. Il est possible de
vérifier la valeur précédemment présente avant la mise à jour, même
après la mise à jour.
● componentDidUpdate(): Cette méthode sera appelée après la mise à
jour du composant dans le DOM.
● componentWillUnmount(): Cette méthode sera appelée lorsque la
suppression du composant du DOM est sur le point de se produire.
29. React Hook fonctionne-t-il avec le typage statique ?
Le typage statique fait référence au processus de vérification du code au
moment de la compilation pour s'assurer que toutes les variables seront
typées statiquement. Les React Hooks sont des fonctions conçues pour
s'assurer que tous les attributs doivent être typés statiquement. Pour
appliquer un typage statique plus strict dans notre code, nous pouvons
utiliser l'API React avec des Hooks personnalisés.
30. Expliquez les types de Hooks dans React.
Il existe deux types de Hooks dans React. Elles sont:
1. Hooks intégrés : Les Hooks intégrés sont divisés en 2 parties comme
indiqué ci-dessous :
● Hooks de base :
○ useState(): Ce composant fonctionnel est utilisé pour définir et

récupérer l'état.
○ useEffect(): Il permet d'effectuer les effets secondaires dans les

composants fonctionnels.
○ useContext(): Il est utilisé pour créer des données communes
 ○

auxquelles la hiérarchie des composants doit accéder sans avoir à

transmettre les accessoires à chaque niveau.
● Hooks supplémentaires :
○ useReducer(): Il est utilisé lorsqu'il existe une logique d'état

complexe comportant plusieurs sous-valeurs ou lorsque l'état à

venir dépend de l'état précédent. Cela vous permettra également
d'optimiser les performances des composants qui déclencheront
des mises à jour plus approfondies, car il est permis de
transmettre la répartition au lieu des rappels.
○ useMemo(): Ceci sera utilisé pour recalculer la valeur mémorisée

lorsqu'il y a un changement dans l'une des dépendances. Cette

optimisation permettra d'éviter des calculs coûteux sur chaque
rendu.
○ useCallback(): Ceci est utile lors du passage des rappels dans les

composants enfants optimisés et dépend de l'égalité de référence

pour la prévention des rendus inutiles.
○ useImperativeHandle(): Cela permettra de modifier l'instance qui

sera passée avec l'objet ref.

○ useDebugValue(): Il est utilisé pour afficher une étiquette pour les

hooks personnalisés dans React DevTools.

○ useRef(): Cela permettra de créer une référence à l'élément DOM

directement dans le composant fonctionnel.

○ useLayoutEffect(): Il est utilisé pour la lecture de la mise en page à

partir du DOM et le re-rendu de manière synchrone.

2. Hooks personnalisés : Un Hook personnalisé est essentiellement une
fonction de JavaScript. Le fonctionnement du Hook personnalisé est
similaire à une fonction normale. L'"utilisation" au début du nom du Hook
personnalisé est nécessaire pour que React comprenne qu'il s'agit d'un
Hook personnalisé et il décrira également que cette fonction spécifique
suit les règles des Hooks. De plus, le développement de Hooks
personnalisés vous permettra d'extraire la logique des composants à
partir de fonctions réutilisables.
31. Différencier React Hooks vs Classes.
React Hooks Des classes
Il est utilisé dans les composants Il est utilisé dans les composants
fonctionnels de React. basés sur les classes de React.
Il ne nécessitera pas de déclaration Il est nécessaire de déclarer le
d'aucun type de constructeur. constructeur à l'intérieur du
composant de classe.
Il ne nécessite pas l'utilisation de Le mot- clé thissera utilisé dans la
mot- thisclé dans la déclaration ou déclaration d'état ( this.state) et
la modification de l'état. dans la modification
( this.setState()).
Il est plus facile à utiliser en raison Aucune fonction spécifique n'est
de la useStatefonctionnalité. disponible pour nous aider à
accéder à l'état et à sa variable
setState correspondante.
React Hooks peut être utile pour En raison de la longue
implémenter Redux et l'API configuration des déclarations
contextuelle. d'état, les états de classe ne sont
généralement pas préférés.
 de la useStatefonctionnalité. disponible pour nous aider à
accéder à l'état et à sa variable
setState correspondante.
React Hooks peut être utile pour En raison de la longue
implémenter Redux et l'API configuration des déclarations
contextuelle. d'état, les états de classe ne sont
généralement pas préférés.
32. En quoi les performances d'utilisation des Hooks seront-elles
différentes par rapport aux classes ?
● React Hooks évitera de nombreux frais généraux tels que la création

d'instances, la liaison d'événements, etc., qui sont présents avec les

classes.
● Les Hooks dans React se traduiront par des arborescences de

composants plus petites car ils éviteront l'imbrication qui existe dans
les HOC (composants d'ordre supérieur) et rendront des accessoires
qui entraîneront moins de travail à effectuer par React.
33. Les Hooks couvrent-ils toutes les fonctionnalités
fournies par les classes ?
Notre objectif est que Hooks couvre toutes les fonctionnalités des classes
au plus tôt. Il n'y a pas d'équivalent Hook pour les méthodes suivantes qui
ne sont pas encore introduites dans Hooks :
● getSnapshotBeforeUpdate()
● getDerivedStateFromError()
● componentDidCatch()

Comme il s'agit d'un début pour Hooks, peu de bibliothèques tierces ne

sont peut-être pas compatibles avec Hooks pour le moment, mais elles
seront bientôt ajoutées.
34. Qu'est-ce que React Router ?
React Router fait référence à la bibliothèque standard utilisée pour le
routage dans React. Cela nous permet de créer une application Web d'une
seule page dans React avec navigation sans même actualiser la page
lorsque l'utilisateur navigue. Il permet également de modifier l'URL du
navigateur et de synchroniser l'interface utilisateur avec l'URL. React
Router utilisera la structure des composants pour appeler les composants,
à l'aide desquels les informations appropriées peuvent être
affichées. Étant donné que React est un framework basé sur des
composants, il n'est pas nécessaire d'inclure et d'utiliser ce
package. Toute autre bibliothèque de routage compatible fonctionnerait
également avec React.
Les principaux composants de React Router sont indiqués ci-dessous :
● BrowserRouter : il s'agit d'une implémentation de routeur qui utilisera

l'API d'historique HTML5 (pushState, popstate et event replaceState)

pour que votre interface utilisateur reste synchronisée avec
l'URL. C'est le composant parent utile pour stocker tous les autres
composants.
● Routes : il s'agit d'un composant plus récent qui a été introduit dans
 ●

React v6 et une mise à niveau du composant.

● Route : il est considéré comme un composant affiché de manière
conditionnelle et certaines interfaces utilisateur seront rendues par
celui-ci chaque fois qu'il y a une correspondance entre son chemin et
l'URL actuelle.
● Lien : il est utile pour créer des liens vers divers itinéraires et mettre
en œuvre la navigation dans toute l'application. Cela fonctionne de la
même manière que la balise d'ancrage en HTML.
35. React Hook peut-il remplacer Redux ?
Le Hook React ne peut pas être considéré comme un remplacement pour
Redux (c'est une bibliothèque JavaScript open-source utile pour gérer
l'état de l'application) lorsqu'il s'agit de la gestion de l'arborescence
globale de l'état de l'application dans les grandes applications complexes,
même si le React sera fournir un Hook useReducer qui gère les transitions
d'état similaires à Redux. Redux est très utile à un niveau inférieur de la
hiérarchie des composants pour gérer les éléments d'un état qui
dépendent les uns des autres, au lieu d'une déclaration de plusieurs
Hooks useState.
Dans les applications Web commerciales qui sont plus grandes, la
complexité sera élevée, donc utiliser uniquement React Hook peut ne pas
être suffisant. Peu de développeurs tenteront de relever le défi avec l'aide
de React Hooks et d'autres combineront React Hooks avec le Redux.
36. Expliquez le rendu conditionnel dans React.
Le rendu conditionnel fait référence à la sortie dynamique des balisages
de l'interface utilisateur en fonction d'un état de condition. Cela
fonctionne de la même manière que les conditions JavaScript. À l'aide du
rendu conditionnel, il est possible de basculer entre des fonctions
d'application spécifiques, le rendu des données de l'API, de masquer ou
d'afficher des éléments, de décider des niveaux d'autorisation, de la
gestion de l'authentification, etc.
Il existe différentes approches pour implémenter le rendu conditionnel
dans React. Certains d'entre eux sont:
● Utilisation de la logique conditionnelle if-else qui convient aussi bien

aux petites qu'aux moyennes applications

● Utilisation d'opérateurs ternaires, ce qui élimine certaines

complications des instructions if-else

● Utiliser des variables d'élément, ce qui nous permettra d'écrire du

code plus propre.

37. Expliquez comment créer un exemple de programme
React Hooks simple.
Je suppose que vous avez des connaissances en matière de codage sur
JavaScript et que vous avez installé Node sur votre système pour créer un
programme React Hook ci-dessous. Une installation de Node est fournie
avec les outils de ligne de commande : npm et npx, où npm est utile pour
installer les packages dans un projet et npx est utile pour exécuter des
commandes de Node à partir de la ligne de commande. Le npx regarde
dans le dossier du projet en cours pour vérifier si une commande y a été
installée. Lorsque la commande n'est pas disponible sur votre ordinateur,
le npx cherchera dans le référentiel npmjs.com, puis la dernière version du
script de commande sera chargée et s'exécutera sans l'installer
localement. Cette fonctionnalité est utile pour créer une application
squelette React en quelques pressions de touches.
Ouvrez le Terminal dans le dossier de votre choix et exécutez la
commande suivante :
npx create-react-app react-items-with-hooks
Ici, create-react-appil s'agit d'un initialiseur d'application créé par
Facebook, pour aider à la création facile et rapide de l'application React,
offrant des options pour la personnaliser lors de la création de
l'application ? La commande ci-dessus créera un nouveau dossier nommé
react-items-with-hooks et il sera initialisé avec une application React de
base. Maintenant, vous pourrez ouvrir le projet dans votre IDE
préféré. Vous pouvez voir un dossier src à l'intérieur du projet avec le
composant principal de l'application App.js. Ce fichier a une seule
fonction App()qui renverra un élément et il utilisera une syntaxe JavaScript
étendue (JSX) pour définir le composant.
JSX vous permettra d'écrire une syntaxe de modèle de style HTML
directement dans le fichier JavaScript. Ce mélange de JavaScript et de
HTML sera converti par la chaîne d'outils React en JavaScript pur qui
rendra l'élément HTML.
Il est possible de définir vos propres composants React en écrivant une
fonction qui renverra un élément JSX. Vous pouvez essayer cela en créant
un nouveau fichier src/SearchItem.jset en y insérant le code suivant.
import React from 'react';
export function SearchItem() {
return (
<div>
<div className="search-input">
<input type="text" placeholder="SearchItem"/>
</div>
<h1 className="h1">Search Results</h1>
<div className="items">
<table>
<thead>
<tr>
<th className="itemname-col">Item Name</th>
<th className="price-col">Price</th>
<th className="quantity-col">Quantity</th>
 </tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
);
}
Il s'agit de la façon dont vous pouvez créer un composant. Il n'affichera
que la table vide et ne fera rien. Mais vous pourrez utiliser le composant
Recherche dans l'application. Ouvrez le fichier src/App.jset ajoutez la
déclaration d'importation donnée ci-dessous en haut du fichier.
import { SearchItem } from './SearchItem';
Désormais, à partir du logo.svg, l'importation sera supprimée et le
contenu de la valeur renvoyée dans la fonction App()sera remplacé par le
code suivant :
<div className="App">
<header>
Items with Hooks
</header>
<SearchItem/>
</div>
Vous pouvez remarquer que l'élément <SearchItem/> a été utilisé comme
un élément HTML. La syntaxe JSX permettra d'inclure les composants de
cette approche directement dans le code JavaScript. Votre application
peut être testée en exécutant la commande ci-dessous dans votre
terminal.
npm start
Cette commande compilera votre application et ouvrira votre navigateur
par défaut dans http://localhost:4000 . Cette commande peut être
maintenue en cours d'exécution lorsque le développement du code est en
cours pour s'assurer que l'application est à jour, et cette page du
navigateur sera également rechargée chaque fois que vous modifierez et
enregistrerez le code.
Cette application fonctionnera bien, mais elle n'a pas l'air bien car elle ne
réagit à aucune entrée de l'utilisateur. Vous pouvez le rendre plus
interactif en ajoutant un état avec React Hooks, en ajoutant une
authentification, etc.
38. Comment créer un composant de commutation pour
afficher différentes pages ?
Un composant de commutation fait référence à un composant qui rendra
l'un des multiples composants. Nous devrions utiliser un objet pour
mapper les valeurs prop aux composants.
Un exemple ci-dessous vous montrera comment afficher différentes
pages en fonction du prop de page à l'aide du composant de
commutation :
import HomePage from './HomePage'
import AboutPage from './AboutPage'
import FacilitiesPage from './FacilitiesPage'
import ContactPage from './ContactPage'
import HelpPage from './HelpPage'
const PAGES = {
home: HomePage,
about: AboutPage,
facilitiess: FacilitiesPage,
contact: ContactPage
help: HelpPage
}
const Page = (props) => {
const Handler = PAGES[props.page] || HelpPage
return <Handler {...props} />
}
// The PAGES object keys can be used in the prop types for catching
errors during dev-time.
Page.propTypes = {
page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
}
39. Comment re-rendre la vue lorsque le navigateur est
redimensionné ?
Il est possible d'écouter l'événement de redimensionnement
dans componentDidMount() puis de mettre à jour les dimensions de
largeur et de hauteur. Cela nécessite la suppression de l'écouteur
d'événement dans la méthode componentWillUnmount() .
En utilisant le code ci-dessous, nous pouvons rendre la vue lorsque le
navigateur est redimensionné.
class WindowSizeDimensions extends React.Component {
constructor(props){
super(props);
this.updateDimension = this.updateDimension.bind(this);
}

componentWillMount() {
this.updateDimension()
}
componentDidMount() {
window.addEventListener('resize', this.updateDimension)
 }
componentWillUnmount() {
window.removeEventListener('resize', this.updateDimension)
}
updateDimension() {
this.setState({width: window.innerWidth, height: window.innerHeight})
}
render() {
return <span>{this.state.width} x {this.state.height}</span>
}
}
40. Comment transmettre des données entre des
composants frères à l'aide du routeur React ?
La transmission de données entre les composants frères de React est
possible en utilisant React Router à l'aide de history.pushet match.params.
Dans le code ci-dessous, nous avons un composant parent AppDemo.jset
deux composants enfants HomePageet AboutPage. Tout est conservé à
l'intérieur d'un routeur en utilisant React-router Route. C'est aussi avoir un
itinéraire pour savoir /about/{params}où nous allons transmettre les
données.
import React, { Component } from ‘react’;
class AppDemo extends Component {
render() {
return (
<Router>
<div className="AppDemo">
<ul>
<li>
<NavLink to="/" activeStyle={{ color:'blue' }}>Home</NavLink>
</li>
<li>
<NavLink to="/about" activeStyle={{ color:'blue' }}>About
</NavLink>
</li>
</ul>
<Route path="/about/:aboutId" component={AboutPage} />
<Route path="/about" component={AboutPage} />
<Route path="/" component={HomePage} />
</div>
</Router>
);
}
}
export default AppDemo;
La HomePage est un composant fonctionnel avec un bouton. En cliquant
sur le bouton, nous utilisons props.history.push(‘/about/’ + data)pour
naviguer par programme dans /about/data.
export default function HomePage(props) {
const handleClick = (data) => {
props.history.push('/about/' + data);
}
return (
<div>
<button onClick={() => handleClick('DemoButton')}>To About</button>
</div>
)
}
De plus, le composant fonctionnel AboutPage obtiendra les données
transmises par props.match.params.aboutId.
export default function AboutPage(props) {
if(!props.match.params.aboutId) {
return <div>No Data Yet</div>
}
return (
<div>
{`Data obtained from HomePage is ${props.match.params.aboutId}`}
</div>
)
}
Après avoir cliqué sur le bouton dans la page d'accueil, la page
ressemblera à ci-dessous :

41. Comment effectuer une redirection automatique après

la connexion ?
Le package react-router fournira le composant <Redirect>dans React
Router. Le rendu d'un <Redirect>composant naviguera vers un nouvel
emplacement. Dans la pile d'historique, l'emplacement actuel sera
remplacé par le nouvel emplacement, tout comme les redirections côté
serveur.
import React, { Component } from 'react'
import { Redirect } from 'react-router'
export default class LoginDemoComponent extends Component {
render() {
if (this.state.isLoggedIn === true) {
return <Redirect to="/your/redirect/page" />
} else {
return <div>{'Please complete login'}</div>
}
}
}
Conclusion
React a gagné en popularité parmi les meilleures sociétés informatiques
telles que Facebook, PayPal, Instagram, Uber, etc., dans le monde entier,
en particulier en Inde. Hooks devient une tendance dans la communauté
React car il supprime les complexités de la gestion de l'état.
Cet article comprend les questions et réponses les plus fréquemment
posées pour les entretiens avec ReactJS et React Hooks qui vous aideront
dans la préparation des entretiens. Aussi, n'oubliez pas que votre réussite
lors de l'entretien ne dépend pas uniquement de vos compétences
techniques, elle dépendra également de votre état d'esprit et de la bonne
impression que vous ferez au premier abord. Tous mes vœux!!