frontend-architecture

Structure a scalable frontend architecture using feature-based file organization and component patterns like Container/Presentational, Compound Components, and Headless Components to establish a robust hierarchy and isolate feature logic for maintainability.

Manage state in Next.js by applying a decision tree to select between local state, Context, global stores, and server state, ensuring the correct data fetching strategy is matched to your specific data flow requirements.

React Query handles data fetching by managing server state separately from client state, supporting optimistic updates to immediately reflect UI changes before server confirmation. This data fetching strategy ensures responsive interfaces while maintaining synchronization with the backend.

Yes, component patterns like Compound Components and Headless Components can be applied to Vue projects. The Skill addresses state management decisions and architectural patterns for React, Next.js, and Vue projects to ensure scalable frontend architectures across frameworks.

Use performance optimization techniques including code splitting, memoization, and list virtualization for large frontend lists. These methods reduce rendering overhead and improve application load times by only rendering visible items and splitting bundles.

Use barrel exports in frontend file organization when implementing a feature-based structure to create clean import paths across modules. This technique aggregates module exports, simplifying component hierarchy references and maintaining scalable architecture boundaries.