transform-data-before-passing-to-components

Summary

UI Components should receive data in a format that requires minimal processing to render. Avoid complex logic like filter, sort, or extensive map operations within the component's template or render function.

Rationale

• Separation of Concerns: The View (Component) is responsible for presentation (HTML/CSS), not business logic (data transformation).
• Testability: Transformation logic is easier to test as a pure utility function or selector than when it is embedded in component markup.
• Performance: Passing pre-calculated data avoids re-running expensive transformations on every component re-render.
• Backend Optimization: Requesting only the necessary fields (GraphQL/BFF) reduces payload size.

Guidance

1. Rule: Props should be "Display-Ready".
   • Avoid: Passing a raw API response and filtering it in the template.
   • Prefer: Passing a specific subset of data that the component needs.
2. Where to Transform:
   • Level 1 (Best): Backend / API (BFF). Return exactly what the UI needs.
   • Level 2 (Good): Logic Layer (Composable/Hook). Use a "Selector" or "ViewModel" pattern to reshaping data before it enters the component tree.
   • Level 3 (Acceptable): Parent Container. A container component transforms data before passing it to a presentational child.
3. Formatting: Simple formatting (dates, currency) is acceptable in components (or usually via small utility functions/pipes), but structural changes should be avoided.