SahilKhan30 React 18+ & Component Architecture Skill
Purpose
Standardize React component composition, state isolation, hooks, and UI state boundary handling.
1. Core Principles
MANDATORY
- Use TypeScript functional components with explicit prop interface types.
- Provide explicit UI state boundaries for:
- Loading State: Visual spinner or skeletonloader.
- Error State: User-friendly error alert with retry trigger.
- Empty State: Clear empty message when datasets contain zero items.
- Wrap feature trees in React Error Boundaries to catch runtime rendering errors.
MUST NOT
- Fetch data directly inside
useEffectwith rawfetch()or Axios (use RTK Query). - Store un-paginated large API responses in component local state.