vercel-react-best-practices

Tool passed security scan

Malicious tool definition detected

Tool: AGENTS.md [6/10] Description: when loading** ```tsx const UserAvatar = memo(function UserAvatar({ user }: { user: User }) { const id = useMemo(() => computeAvatarId(user), [user]) return <Avatar id={id} /> }) function Profile({ user, loading }: Props) { if (loading) return <Skeleton /> return ( <div> <UserAvatar user={user} /> </div> ) } ``` **Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, manual memoization with `memo()` and `useMemo()` is no

Tool: AGENTS.md [8/10] Description: with `suppressHydrationWarning` to prevent noisy warnings.

Tool: AGENTS.md [9/10] Description: const slug = slugify(project.name) return <ProjectCard key={project.id} slug={slug} /> })} </div> ) } ``` **Correct: cached results** ```typescript // Module-level cache const slugifyCache = new Map<string, string>() function cachedSlugify(text: string): string { if (slugifyCache.has(text)) { return slugifyCache.get(text)!

Tool: AGENTS.md [10/10] Description: a.updatedAt - b.updatedAt) return { oldest: sorted[0], newest: sorted[sorted.length - 1] } } ``` Still sorts unnecessarily when only min/max are needed.

Malicious tool definition detected

Tool: SKILL.md Description: --- name: vercel-react-best-practices description: React and Next.js performance optimization guidelines from Vercel Engineering.

Malicious tool definition detected

Tool: rules/advanced-event-handler-refs.md Description: --- title: Store Event Handlers in Refs impact: LOW impactDescription: stable subscriptions tags: advanced, hooks, refs, event-handlers, optimization --- ## Store Event Handlers in Refs Store callbacks in refs when used in effects that shouldn't re-subscribe on callback changes.

Malicious tool definition detected

Tool: rules/advanced-use-latest.md Description: --- title: useEffectEvent for Stable Callback Refs impact: LOW impactDescription: prevents effect re-runs tags: advanced, hooks, useEffectEvent, refs, optimization --- ## useEffectEvent for Stable Callback Refs Access latest values in callbacks without adding them to dependency arrays.

Malicious tool definition detected

Tool: rules/async-api-routes.md Description: --- title: Prevent Waterfall Chains in API Routes impact: CRITICAL impactDescription: 2-10× improvement tags: api-routes, server-actions, waterfalls, parallelization --- ## Prevent Waterfall Chains in API Routes In API routes and Server Actions, start independent operations immediately, even if you don't await them yet.

Malicious tool definition detected

Malicious tool definition detected

Tool: rules/async-parallel.md Description: --- title: Promise.all() for Independent Operations impact: CRITICAL impactDescription: 2-10× improvement tags: async, parallelization, promises, waterfalls --- ## Promise.all() for Independent Operations When async operations have no interdependencies, execute them concurrently using `Promise.all()`.

Malicious tool definition detected

Tool: rules/async-suspense-boundaries.md Description: --- title: Strategic Suspense Boundaries impact: HIGH impactDescription: faster initial paint tags: async, suspense, streaming, layout-shift --- ## Strategic Suspense Boundaries Instead of awaiting data in async components before returning JSX, use Suspense boundaries to show the wrapper UI faster while data loads.

Malicious tool definition detected

Tool: rules/bundle-barrel-imports.md Description: --- title: Avoid Barrel File Imports impact: CRITICAL impactDescription: 200-800ms import cost, slow builds tags: bundle, imports, tree-shaking, barrel-files, performance --- ## Avoid Barrel File Imports Import directly from source files instead of barrel files to avoid loading thousands of unused modules.

Malicious tool definition detected

Tool: rules/client-passive-event-listeners.md Description: --- title: Use Passive Event Listeners for Scrolling Performance impact: MEDIUM impactDescription: eliminates scroll delay caused by event listeners tags: client, event-listeners, scrolling, performance, touch, wheel --- ## Use Passive Event Listeners for Scrolling Performance Add `{ passive: true }` to touch and wheel event listeners to enable immediate scrolling.

Malicious tool definition detected

Tool: rules/js-batch-dom-css.md Description: --- title: Avoid Layout Thrashing impact: MEDIUM impactDescription: prevents forced synchronous layouts and reduces performance bottlenecks tags: javascript, dom, css, performance, reflow, layout-thrashing --- ## Avoid Layout Thrashing Avoid interleaving style writes with layout reads.

Malicious tool definition detected

Tool: rules/js-cache-function-results.md Description: --- title: Cache Repeated Function Calls impact: MEDIUM impactDescription: avoid redundant computation tags: javascript, cache, memoization, performance --- ## Cache Repeated Function Calls Use a module-level Map to cache function results when the same function is called repeatedly with the same inputs during render.

Malicious tool definition detected

for (let i = 0; i < arr.length; i++) { process(obj.config.settings.value) } ``` **Correct (1 lookup total):** ```typescript const value = obj.config.settings.value const len = arr.length for (let i = 0; i < len; i++) { process(value) } ```

Malicious tool definition detected

Tool: rules/js-combine-iterations.md Description: --- title: Combine Multiple Array Iterations impact: LOW-MEDIUM impactDescription: reduces iterations tags: javascript, arrays, loops, performance --- ## Combine Multiple Array Iterations Multiple `.filter()` or `.map()` calls iterate the array multiple times.

Malicious tool definition detected

Tool: rules/js-hoist-regexp.md Description: --- title: Hoist RegExp Creation impact: LOW-MEDIUM impactDescription: avoids recreation tags: javascript, regexp, optimization, memoization --- ## Hoist RegExp Creation Don't create RegExp inside render.

Malicious tool definition detected

For 1000 orders × 1000 users: 1M ops → 2K ops.

Malicious tool definition detected

Tool: rules/js-min-max-loop.md Description: --- title: Use Loop for Min/Max Instead of Sort impact: LOW impactDescription: O(n) instead of O(n log n) tags: javascript, arrays, performance, sorting, algorithms --- ## Use Loop for Min/Max Instead of Sort Finding the smallest or largest element only requires a single pass through the array.

Malicious tool definition detected

Tool: rules/js-set-map-lookups.md Description: --- title: Use Set/Map for O(1) Lookups impact: LOW-MEDIUM impactDescription: O(n) to O(1) tags: javascript, set, map, data-structures, performance --- ## Use Set/Map for O(1) Lookups Convert arrays to Set/Map for repeated membership checks.

Malicious tool definition detected

Tool: rules/js-tosorted-immutable.md Description: --- title: Use toSorted() Instead of sort() for Immutability impact: MEDIUM-HIGH impactDescription: prevents mutation bugs in React state tags: javascript, arrays, immutability, react, state, mutation --- ## Use toSorted() Instead of sort() for Immutability `.sort()` mutates the array in place, which can cause bugs with React state and props.

Malicious tool definition detected

Tool: rules/rendering-conditional-render.md Description: --- title: Use Explicit Conditional Rendering impact: LOW impactDescription: prevents rendering 0 or NaN tags: rendering, conditional, jsx, falsy-values --- ## Use Explicit Conditional Rendering Use explicit ternary operators (`?

Malicious tool definition detected

Tool: rules/rendering-content-visibility.md Description: --- title: CSS content-visibility for Long Lists impact: HIGH impactDescription: faster initial render tags: rendering, css, content-visibility, long-lists --- ## CSS content-visibility for Long Lists Apply `content-visibility: auto` to defer off-screen rendering.

Malicious tool definition detected

Tool: rules/rendering-hydration-no-flicker.md Description: --- title: Prevent Hydration Mismatch Without Flickering impact: MEDIUM impactDescription: avoids visual flicker and hydration errors tags: rendering, ssr, hydration, localStorage, flicker --- ## Prevent Hydration Mismatch Without Flickering When rendering content that depends on client-side storage (localStorage, cookies), avoid both SSR breakage and post-hydration flickering by injecting a synchronous script that updates the DOM before

Malicious tool definition detected

For these *expected* mismatches, wrap the dynamic text in an element with `suppressHydrationWarning` to prevent noisy warnings.

Malicious tool definition detected

Tool: rules/rendering-svg-precision.md Description: --- title: Optimize SVG Precision impact: LOW impactDescription: reduces file size tags: rendering, svg, optimization, svgo --- ## Optimize SVG Precision Reduce SVG coordinate precision to decrease file size.

Malicious tool definition detected

Tool: rules/rendering-usetransition-loading.md Description: --- title: Use useTransition Over Manual Loading States impact: LOW impactDescription: reduces re-renders and improves code clarity tags: rendering, transitions, useTransition, loading, state --- ## Use useTransition Over Manual Loading States Use `useTransition` instead of manual `useState` for loading states.

Malicious tool definition detected

Tool: rules/rerender-defer-reads.md Description: --- title: Defer State Reads to Usage Point impact: MEDIUM impactDescription: avoids unnecessary subscriptions tags: rerender, searchParams, localStorage, optimization --- ## Defer State Reads to Usage Point Don't subscribe to dynamic state (searchParams, localStorage) if you only read it inside callbacks.

Malicious tool definition detected

Tool: rules/rerender-derived-state.md Description: --- title: Subscribe to Derived State impact: MEDIUM impactDescription: reduces re-render frequency tags: rerender, derived-state, media-query, optimization --- ## Subscribe to Derived State Subscribe to derived boolean state instead of continuous values to reduce re-render frequency.

Malicious tool definition detected

**Fewer dependencies** - Simplifies dependency arrays and reduces memory leaks 4.

Malicious tool definition detected

No auth check await db.user.delete({ where: { id: userId } }) return { success: true } } ``` **Correct (authentication inside the action):** ```typescript 'use server' import { verifySession } from '@/lib/auth' import { unauthorized } from '@/lib/errors' export async function deleteUser(userId: string) { // Always check auth inside the action const session = await verifySession() if (!session) { throw unauthorized('Must be logged in') } // Check authorization too if (session.user.role !== 'admin

Malicious tool definition detected

Tool: rules/server-cache-lru.md Description: --- title: Cross-Request LRU Caching impact: HIGH impactDescription: caches across requests tags: server, cache, lru, cross-request --- ## Cross-Request LRU Caching `React.cache()` only works within one request.

Tool passed security scan

Tool passed security scan