container-view-pattern

You can enforce the React Container/View pattern by using a skill that validates component creation and generates the required Container.tsx, View.tsx, and index.tsx files, ensuring logic and presentation are separated.

The React Container/View pattern separates business logic from presentation in your components. It improves code maintainability and promotes separation of concerns by isolating data fetching and rendering into distinct files.

To scaffold a component separating logic and presentation, use the provided generation scripts to automatically create the Container.tsx, View.tsx, and index.tsx files following the correct file naming conventions and hook placement rules.

Yes, you can validate existing React components against the Container/View pattern. The skill checks components within specified directories like features/*/components/ to ensure they adhere to correct hook placement and rendering practices.

Yes, the React Container/View pattern requires specific file naming conventions. You must use Container.tsx, View.tsx, and index.tsx filenames within your component directories to maintain structural consistency and pass validation.

You should avoid the Container/View pattern for simple React components that do not benefit from strict logic and presentation separation, as enforcing it on trivial UI elements adds unnecessary file structure and boilerplate overhead.