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."

Используйте при создании компонентов React, структурировании файлов компонентов, организации кода компонента, отладка проблем с перехватами React или когда вас просят «создать компонент React», «структурировать этот компонент», «проверить структуру компонента», «рефакторить этот компонент», «исправить бесконечный цикл» или «useEffect не работает». Применяется как к компонентам TypeScript, так и к компонентам JavaScript React. Включает в себя крючки-антипаттерны. Источник: antjanus/skillbox.