Créez 10 modèles pratiques pour des composants React modulaires, qui prennent en compte les meilleures pratiques du processus de développement React moderne. Les modèles doivent couvrir différents cas d’utilisation typiques et être facilement personnalisables.

Contexte : [React, JavaScript, composants, modularité, réutilisabilité, hooks, gestion d’état, props, design UI, développement frontend]

Objectif : [développement de composants efficace et maintenable, structuration claire, intégration simple, réutilisabilité, techniques React modernes]

Pour chaque modèle, expliquez :
1) le cas d’utilisation ou la fonctionnalité du composant
2) la structure avec un exemple de code, incluant des fonctionnalités React modernes (ex. hooks, context, suspense)
3) des conseils sur les meilleures pratiques concernant la structure, la gestion d’état et le style

Les modèles doivent :
- inclure à la fois des composants fonctionnels et à état
- aborder TypeScript ou JavaScript (optionnel selon indication)
- prendre en compte un design UI responsive et accessible
- être adaptés aux développeurs ayant des connaissances de base en React