React in production

React 19 is the client rendering layer across all 18 Next.js applications in the Avo stack. The architecture leans toward Server Components for data and React Client Components only where interactivity requires it: forms, real-time charts, filter panels, and the trading dashboard's position table.

The key discipline is keeping the client bundle small. Every page audit starts by checking the Network tab for components that import heavy libraries (chart libraries, date pickers, rich text editors) and verifying they are lazy-loaded or replaced with lighter alternatives. The regime detection chart uses a minimal custom SVG renderer rather than a full charting library, keeping the page's client JS under 80KB gzipped.

React's concurrent features (useTransition, Suspense) handle the async data loading pattern on the screener and intelligence pages. Filter changes trigger a transition so the old results stay visible without layout shift while the new query runs. Suspense boundaries wrap each data panel so a slow ClickHouse query for one section does not block the render of other sections.

Example workflow: building an interactive filter panel for a client's data product. 1. Wrap the entire results section in a Suspense boundary with a skeleton fallback. 2. Put filter state (asset class, date range, threshold) in a URL search param using useSearchParams so filters are shareable and bookmarkable. 3. On filter change, call startTransition(() => router.push(newUrl)) so the previous results stay visible during the new query. 4. The Server Component reads the search params, runs the ClickHouse query, and streams the new results down. 5. Memoize each result row with React.memo keyed by the row's unique ID to prevent re-rendering unchanged rows when the surrounding list updates. 6. Run a Lighthouse mobile audit before shipping. Target CLS under 0.1. Any layout shift from async data swaps needs a fixed-height placeholder.

The SaaS platform and portfolio dashboard are the most React-intensive pages. The portfolio dashboard renders a live position table updated every 10 seconds via SWR polling against the Rust Apex backend. The table uses React.memo on individual row components to avoid re-rendering positions that have not changed. Without that memo, a full table re-render on every 10-second tick was measurable at ~40ms on the main thread for a 50-position portfolio.

React 19's server action pattern is used for the /start-a-project form, the scheduling system, and the onboarding automation. The form submission hits a server action that writes to ClickHouse and sends a Resend confirmation email, with no separate API route needed.