[MEDIUM] Extract inline view components from App.tsx into separate files #45

New issue

Closed

opened 2026-06-09 00:03:13 +00:00 by Mark · 0 comments

Mark commented

2026-06-09 00:03:13 +00:00

Owner

Locations: src/App.tsx — Sidebar, MobileMenu, DashboardView, CalendarView, SubscriptionsView, SettingsView, all defined as inline arrow-function constants

Problem: New component functions allocated on every App render. Triggers unnecessary child reconciliations. Prevents tree-shaking and lazy-loading of views.

Impact: Slower reconciliation; larger initial bundle.

Fix: Extract to src/views/ directory. Lazy-load with React.lazy(() => import(./views/...)).

Effort: ~2-3 hours

**Locations:** `src/App.tsx` — `Sidebar`, `MobileMenu`, `DashboardView`, `CalendarView`, `SubscriptionsView`, `SettingsView`, all defined as inline arrow-function constants **Problem:** New component functions allocated on every `App` render. Triggers unnecessary child reconciliations. Prevents tree-shaking and lazy-loading of views. **Impact:** Slower reconciliation; larger initial bundle. **Fix:** Extract to `src/views/` directory. Lazy-load with `React.lazy(() => import(./views/...))`. **Effort:** ~2-3 hours