frontend-patternslisted

# React and Next.js performance Apply this skill when writing, reviewing, or refactoring React or Next.js code for runtime performance. For component API design and repeated UI structure, use `frontend-components`; this skill owns performance decisions. Start with measured or structurally certain high-impact work. Eliminate request waterfalls and unnecessary client JavaScript before considering memoization or JavaScript micro-optimizations. ## 1. Eliminate waterfalls - Start independent operations together and await them together. - Move an `await` into the branch that actually consumes its result. - When operations have partial dependencies, begin each operation as soon as its own inputs exist rather than serializing the whole chain. - Place Suspense boundaries so independent page regions can stream without blocking the shell. - In route handlers and server actions, start independent I/O early, perform synchronous validation while it is pending, then await only where required. ```ts const userPromise = getUser(id) const settingsPromise = getSettings(id) const [user, settings] = await Promise.all([userPromise, settingsPromise]) ``` Do not parallelize operations that depend on one another, mutate shared state, or require transactional ordering. ## 2. Reduce shipped JavaScript - Prefer server components and server data access until browser state, events, or APIs require a client boundary. - Import the narrow module actually used. Avoid broad barrel imports when they pul