react-best-practices-audit

React Best Practices Audit: apps/web

Audited against the Vercel React Best Practices (57 rules, 8 categories). Findings are ordered by impact.

---

1. Eliminating Waterfalls -- CRITICAL

1a. Sequential await chains in Server Components FIXED

Rule violated: async-parallel (Promise.all for independent operations)

app/sessions/[sessionId]/chats/[chatId]/page.tsx:67-93 -- Four sequential await calls where some are independent:

const session = await getServerSession();     // 1. auth
const sessionRecord = await getSessionById(sessionId); // 2. depends on nothing
const chat = await getChatByIdWithRetry(chatId, sessionId); // 3. depends on sessionId only
const dbMessages = await getChatMessages(chatId); // 4. depends on chatId only

getServerSession() and getSessionById() are independent and could run in parallel. After the ownership check, getChatByIdWithRetry and getChatMessages could also overlap (chatId is known from params, not from the session fetch).

Fix: Start independent promises early, await late:

const sessionPromise = getServerSession();
const sessionRecordPromise = getSessionById(sessionId);
const session = await sessionPromise;
if (!session?.user) redirect("/");
const sessionRecord = await sessionRecordPromise;
// ... ownership check ...
const [chat, dbMessages] = await Promise.all([
  getChatByIdWithRetry(chatId, sessionId),
  getChatMessages(chatId),
]);

1b. Missing Suspense boundaries FIXED

Rule violated: async-suspense-boundaries

There are zero loading.tsx files and zero error.tsx files in the entire app. Only one <Suspense> boundary exists (app/settings/accounts/page.tsx:8). The root layout (app/layout.tsx:24-39) has no Suspense wrapping {children}.

This means:

• No streaming SSR for any page
• The entire page tree (including the retry loop at page.tsx:31-48 that can block for up to 5 seconds) must resolve before anything paints

Fix: Added loading.tsx files for key route segments (sessions/[sessionId]/chats/[chatId], sessions/[sessionId], shared/[shareId]). Next.js automatically wraps these in <Suspense> boundaries.