Évaluation finale

Quiz du cours « React — données, effets et formulaires »

12 questions à choix unique pour vérifier que le parcours est acquis. Une seule tentative de réponse par question, correction immédiate.

80 % de bonnes réponses sont nécessaires pour valider le cours. Vous pouvez repasser le quiz autant de fois que nécessaire : seul votre meilleur score est conservé.

Vous souhaitez limiter le champ categorie d’une dépense à deux valeurs autorisées. Quelle déclaration TypeScript exprime cette contrainte ?

type Categorie = "alimentation" | "transport" type Categorie = string[] type Categorie = any type Categorie = { alimentation: string; transport: string }

Le champ description est facultatif dans le modèle d’une dépense. Quelle syntaxe TypeScript convient ?

description: string description?: string description!: string description: optional string

Quel choix permet de rendre une liste React à partir du tableau depenses en associant une clé stable à chaque élément ?

depenses.forEach(depense => {depense.nom}) depenses.map(depense => {depense.nom}) depenses.map(depense => {depense.nom}) depenses.map(depense => {depense.nom})

Vous devez lancer une requête de récupération une seule fois au montage d’un composant. Quelle forme de useEffect correspond à ce besoin ?

useEffect(() => { charger(); }, [charger]) useEffect(() => { charger(); }) useEffect(() => { charger(); }, [depenses]) useEffect(() => { charger(); }, [])

Avec fetch, comment détecter une réponse HTTP non réussie avant de traiter son contenu ?

Vérifier response.ok et signaler une erreur si sa valeur est fausse Vérifier que response.json existe Considérer toute réponse reçue comme réussie Vérifier que response.status est toujours égal à 200

Une requête peut encore répondre après le démontage du composant. Quelle solution permet de l’annuler dans le nettoyage de l’effet ?

Vider le tableau de dépenses dans le nettoyage Créer un AbortController, transmettre son signal à fetch et appeler abort() au nettoyage Relancer fetch dans le nettoyage de l’effet Ajouter un tableau de dépendances vide sans autre modification

Comment rendre le champ montant contrôlé par React ?

Donner defaultValue au champ sans gérer les changements Lire sa valeur uniquement avec un sélecteur DOM lors de l’envoi Lier value à l’état React et mettre cet état à jour avec onChange Lier value à une constante et ignorer onChange

Lors de l’envoi du formulaire, quelle action empêche le rechargement de la page tout en permettant la validation des champs ?

Effectuer la validation dans un effet après le rendu Vider les champs avant de lire leurs valeurs Déclencher la validation uniquement dans onChange Traiter onSubmit, appeler preventDefault() puis valider les valeurs

Comment ajouter une dépense à l’état existant sans modifier le tableau en place ?

setDepenses(precedentes => [...precedentes, nouvelleDepense]) setDepenses(precedentes => { precedentes.push(nouvelleDepense); return precedentes; }) depenses.push(nouvelleDepense) setDepenses([...depenses])

Le formulaire et la liste doivent accéder à la même liste de dépenses. Où placer cet état pour pouvoir le partager ?

Dans chacun des deux composants, avec une copie synchronisée Dans un composant parent commun, transmis aux composants concernés par props et fonctions de rappel Dans le composant de liste uniquement, sans transmettre de fonction au formulaire Dans une variable globale modifiée directement par les deux composants

Le total mensuel doit être calculé à partir des dépenses et du mois sélectionné. Quelle approche évite de dupliquer cet état ?

Enregistrer séparément le total et les dépenses, puis les mettre à jour manuellement Copier les dépenses filtrées dans un nouvel état à chaque rendu Calculer le total à partir des dépenses et du mois sélectionné lors du rendu Conserver le total dans une variable globale

Vous extrayez la récupération des dépenses et ses états dans un hook personnalisé réutilisable. Quel nom respecte la convention des hooks React ?

loadExpenses ExpensesLoader getExpenses useExpenses

Toutes les questions doivent être répondues.