react-performance

Start independent promises together with Promise.all, or split sibling data fetching into separate child components so React runs them in parallel. Defer awaits until the branch that actually uses the data, and check cheap synchronous conditions before any await.

Replace barrel imports like import { Button } from '@/components' with direct per-module imports such as '@/components/Button'. Next.js 13.5+ Optimize Package Imports automates this for listed packages, but non-listed libraries still need manual direct imports.

Use them for expensive computations and to preserve object identity passed to memoized children, not for simple primitives. If the project ships React Compiler, manual memoization becomes unnecessary and these rules downgrade to review-only.

No, React.cache deduplicates only within a single request render, so three components calling getUser('1') produce one query. For cross-request caching of stable data, use an LRU cache or Next.js unstable_cache.

Long lists benefit from content-visibility: auto with contain-intrinsic-size so the browser skips offscreen rendering. Also check for new object identities in props breaking memoization and consider useDeferredValue for expensive filtering.

Manual rules require ongoing discipline in code review and can become noise once React Compiler, Turbopack, and Optimize Package Imports automate them. The Skill itself notes demoting rerender rules to review-only when the compiler is present.