Cours React avancé : architecture et performance

Dans l’architecture du tableau de bord, quelle responsabilité convient à la page qui l’assemble ?

Composer les zones de l’écran et relier les composants nécessaires Effectuer elle-même tous les calculs métier et afficher chaque détail Remplacer le service de données pour charger directement les dépenses Porter l’état de chaque champ de tous les formulaires

Un type TypeScript strict garantit-il qu’une dépense reçue d’une API respecte sa forme à l’exécution ?

Oui, dès que la réponse est annotée avec le type de dépense Non, les types sont vérifiés à la compilation ; les données externes nécessitent des contrôles à l’exécution Oui, si le type de dépense est défini comme un alias Non, car TypeScript ne permet pas de décrire des données métier

Les dépenses sont stockées dans un état et les dépenses filtrées sont affichées. Quelle approche évite de dupliquer l’état ?

Stocker les dépenses filtrées dans un second état mis à jour après chaque modification Conserver un état séparé pour chaque combinaison de filtres Calculer les dépenses filtrées à partir des dépenses et du filtre courant Copier les dépenses filtrées dans le contexte global

Où isoler le chargement et l’enregistrement des dépenses afin que l’interface ne dépende pas directement du mécanisme de persistance ?

Dans chaque composant qui affiche une dépense Dans le contexte du mois sélectionné Dans le composant de formulaire, sous forme d’effets Derrière une interface de service typée dédiée aux données

Lorsqu’une dépense est ajoutée à un tableau stocké dans l’état React, quelle mise à jour respecte l’immutabilité ?

Créer un nouveau tableau contenant les dépenses existantes et la nouvelle dépense Ajouter la dépense au tableau existant avec push, puis réutiliser ce tableau Modifier directement l’objet de la dernière dépense avant de l’ajouter Conserver le tableau inchangé et modifier uniquement son index

Le mois sélectionné doit être partagé entre plusieurs zones du tableau de bord, mais les données de dépenses n’ont pas besoin d’être globales. Que faut-il exposer dans le contexte ciblé ?

Les dépenses, les formulaires et tous les filtres de l’application Le mois sélectionné, en limitant la portée du fournisseur aux consommateurs concernés Une copie de chaque état local afin de synchroniser les composants Uniquement les fonctions de rendu des composants consommateurs

Une sélection mensuelle et un filtre doivent être mis à jour selon des transitions cohérentes. Quel outil convient pour centraliser ces transitions avec des actions typées ?

useMemo useCallback useReducer React.memo

Quel élément observable peut justifier l’adoption d’une bibliothèque de state management pour le tableau de bord ?

Le fait que l’application utilise TypeScript strict La présence d’un composant de formulaire avec un état local Le souhait de remplacer tous les hooks React par une bibliothèque Un coût important de synchronisation d’un état partagé entre plusieurs écrans

Le récapitulatif mensuel ralentit l’interface. Quelle démarche permet d’identifier la source du coût avant d’optimiser ?

Profiler l’application et examiner les rendus et calculs dans le flamegraph Ajouter useMemo à chaque calcul sans mesurer les performances Remplacer tous les composants par des composants mémoïsés Réduire le nombre de types TypeScript du projet

Le calcul du total mensuel est coûteux selon le profilage. Quelle utilisation de useMemo est appropriée ?

Mettre en cache le total et omettre les dépendances qui changent rarement Mémoïser le calcul avec les dépenses et le mois comme dépendances Utiliser useMemo pour stocker le total comme source de vérité permanente Remplacer le calcul par un useCallback sans dépendances

Dans un formulaire de dépense, quelle association aide les technologies d’assistance à identifier un champ et son erreur ?

Un placeholder utilisé comme unique indication du champ Un texte d’erreur affiché à côté, sans relation avec le contrôle Un label associé au contrôle et une erreur reliée avec aria-describedby Un titre de page appliqué comme nom à tous les contrôles

Après l’ajout d’une dépense, comment annoncer une confirmation aux lecteurs d’écran sans déplacer le focus ?

Déplacer systématiquement le focus vers le titre de la page Retirer le formulaire du document après chaque ajout Modifier le libellé du bouton sans autre indication Afficher la confirmation dans une région aria-live et laisser le focus en place