Don't use barrel files (index.ts that re-exports) in applications:Why:
Barrel files bundle unused code
Tree-shaking less effective
Longer build times
Exception: Barrel files OK in packages (@prepared911/ui) where consumers import from package root.
File Size Limits
React Components (Max 500 lines)
Hooks (Max 200 lines)
Feature Folder Structure
GraphQL Co-location
GraphQL files MUST be co-located with the component/hook that uses them:Name each file for the kind of definition it holds: queries.graphql, mutations.graphql, subscriptions.graphql, or fragments.graphql. The page or root that owns a request keeps the queries.graphql. Each component below it keeps a fragments.graphql with its Component_prop fragment. See GraphQL Colocation and GraphQL Fragments.
Module Structure
For larger features:
Named Exports
Prefer named exports over default exports:Benefits:
Better IDE autocomplete
Easier refactoring
Consistent naming across codebase
Better tree-shaking
When to Split Files
Split when:
File exceeds size limit (500 for components, 200 for hooks)
Multiple concerns in one file
Sub-components can be reused
Logic can be tested independently
Extract to:
Custom hooks (use-*.ts)
Sub-components (ComponentName.tsx)
Utilities (helpers.ts, formatters.ts)
Types (types.ts, models.ts)
Directory Naming
Use kebab-case for directories:Use PascalCase or kebab-case for files:ORBe consistent within a feature/module.