ideal-react-component

A battle-tested pattern for organizing React component files that emphasizes readability, maintainability, and logical flow. This structure helps teams maintain consistency and makes components easier to understand at a glance.

Core principle: Declare everything in a predictable order—imports to styles to types to logic to render—so developers know where to find things.

Why: "When you deal with more than a handful of imports, it's really easy to get lost in what the file is using."

Da utilizzare durante la creazione di componenti React, la strutturazione di file di componenti, l'organizzazione di codici di componenti, debug dei problemi degli hook React o quando viene chiesto di "creare un componente React", "strutturare questo componente", "rivedi la struttura del componente", "refactoring questo componente", "correzione del ciclo infinito" o "useEffect non funzionante". Si applica sia ai componenti TypeScript che a quelli JavaScript React. Include ganci antipattern. Fonte: antjanus/skillbox.