@nockdev/awf 6.2.0 → 6.2.1

package/.agent/skills/cross-cutting/ui-ux-pro-max/data/react-performance.yaml

@@ -1,504 +0,0 @@
-metadata:
-  skill: ui-ux-pro-max
-  domain: react_performance
-  version: 6.2.0
-  updated: '2026-02-05'
-  migrated_from: react-performance.csv
-  patterns_count: 44
-  columns:
-  - 'No'
-  - Category
-  - Issue
-  - Keywords
-  - Platform
-  - Description
-  - Do
-  - Don't
-  - Code Example Good
-  - Code Example Bad
-  - Severity
-patterns:
-- id: '1'
-  category: Async Waterfall
-  issue: Defer Await
-  keywords: async await defer branch
-  platform: React/Next.js
-  description: Move await into branches where actually used to avoid blocking unused code paths
-  do: Move await operations into branches where they're needed
-  don_t: Await at top of function blocking all branches
-  code_example_good: 'if (skip) return { skipped: true }; const data = await fetch()'
-  code_example_bad: 'const data = await fetch(); if (skip) return { skipped: true }'
-  severity: Critical
-- id: '2'
-  category: Async Waterfall
-  issue: Promise.all Parallel
-  keywords: promise all parallel concurrent
-  platform: React/Next.js
-  description: Execute independent async operations concurrently using Promise.all()
-  do: Use Promise.all() for independent operations
-  don_t: Sequential await for independent operations
-  code_example_good: const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])
-  code_example_bad: const user = await fetchUser(); const posts = await fetchPosts()
-  severity: Critical
-- id: '3'
-  category: Async Waterfall
-  issue: Dependency Parallelization
-  keywords: better-all dependency parallel
-  platform: React/Next.js
-  description: Use better-all for operations with partial dependencies to maximize parallelism
-  do: Use better-all to start each task at earliest possible moment
-  don_t: Wait for unrelated data before starting dependent fetch
-  code_example_good: await all({ user() {}, config() {}, profile() { return fetch((await this.$.user).id) } })
-  code_example_bad: const [user, config] = await Promise.all([...]); const profile = await fetchProfile(user.id)
-  severity: Critical
-- id: '4'
-  category: Async Waterfall
-  issue: API Route Optimization
-  keywords: api route waterfall promise
-  platform: React/Next.js
-  description: In API routes start independent operations immediately even if not awaited yet
-  do: Start promises early and await late
-  don_t: Sequential awaits in API handlers
-  code_example_good: const sessionP = auth(); const configP = fetchConfig(); const session = await sessionP
-  code_example_bad: const session = await auth(); const config = await fetchConfig()
-  severity: Critical
-- id: '5'
-  category: Async Waterfall
-  issue: Suspense Boundaries
-  keywords: suspense streaming boundary
-  platform: React/Next.js
-  description: Use Suspense to show wrapper UI faster while data loads
-  do: Wrap async components in Suspense boundaries
-  don_t: Await data blocking entire page render
-  code_example_good: <Suspense fallback={<Skeleton />}><DataDisplay /></Suspense>
-  code_example_bad: const data = await fetchData(); return <DataDisplay data={data} />
-  severity: High
-- id: '6'
-  category: Bundle Size
-  issue: Barrel Imports
-  keywords: barrel import direct path
-  platform: React/Next.js
-  description: Import directly from source files instead of barrel files to avoid loading unused modules
-  do: Import directly from source path
-  don_t: Import from barrel/index files
-  code_example_good: import Check from 'lucide-react/dist/esm/icons/check'
-  code_example_bad: import { Check } from 'lucide-react'
-  severity: Critical
-- id: '7'
-  category: Bundle Size
-  issue: Dynamic Imports
-  keywords: dynamic import lazy next
-  platform: React/Next.js
-  description: Use next/dynamic to lazy-load large components not needed on initial render
-  do: Use dynamic() for heavy components
-  don_t: Import heavy components at top level
-  code_example_good: 'const Monaco = dynamic(() => import(''./monaco''), { ssr: false })'
-  code_example_bad: import { MonacoEditor } from './monaco-editor'
-  severity: Critical
-- id: '8'
-  category: Bundle Size
-  issue: Defer Third Party
-  keywords: analytics defer third-party
-  platform: React/Next.js
-  description: Load analytics and logging after hydration since they don't block interaction
-  do: Load non-critical scripts after hydration
-  don_t: Include analytics in main bundle
-  code_example_good: 'const Analytics = dynamic(() => import(''@vercel/analytics''), { ssr: false })'
-  code_example_bad: import { Analytics } from '@vercel/analytics/react'
-  severity: Medium
-- id: '9'
-  category: Bundle Size
-  issue: Conditional Loading
-  keywords: conditional module lazy
-  platform: React/Next.js
-  description: Load large data or modules only when a feature is activated
-  do: Dynamic import when feature enabled
-  don_t: Import large modules unconditionally
-  code_example_good: useEffect(() => { if (enabled) import('./heavy.js') }, [enabled])
-  code_example_bad: import { heavyData } from './heavy.js'
-  severity: High
-- id: '10'
-  category: Bundle Size
-  issue: Preload Intent
-  keywords: preload hover focus intent
-  platform: React/Next.js
-  description: Preload heavy bundles on hover/focus before they're needed
-  do: Preload on user intent signals
-  don_t: Load only on click
-  code_example_good: onMouseEnter={() => import('./editor')}
-  code_example_bad: onClick={() => import('./editor')}
-  severity: Medium
-- id: '11'
-  category: Server
-  issue: React.cache Dedup
-  keywords: react cache deduplicate request
-  platform: React/Next.js
-  description: Use React.cache() for server-side request deduplication within single request
-  do: Wrap data fetchers with cache()
-  don_t: Fetch same data multiple times in tree
-  code_example_good: export const getUser = cache(async () => await db.user.find())
-  code_example_bad: export async function getUser() { return await db.user.find() }
-  severity: Medium
-- id: '12'
-  category: Server
-  issue: LRU Cache Cross-Request
-  keywords: lru cache cross request
-  platform: React/Next.js
-  description: Use LRU cache for data shared across sequential requests
-  do: Use LRU for cross-request caching
-  don_t: Refetch same data on every request
-  code_example_good: 'const cache = new LRUCache({ max: 1000, ttl: 5*60*1000 })'
-  code_example_bad: Always fetch from database
-  severity: High
-- id: '13'
-  category: Server
-  issue: Minimize Serialization
-  keywords: serialization rsc boundary
-  platform: React/Next.js
-  description: Only pass fields that client actually uses across RSC boundaries
-  do: Pass only needed fields to client components
-  don_t: Pass entire objects to client
-  code_example_good: <Profile name={user.name} />
-  code_example_bad: <Profile user={user} /> // 50 fields serialized
-  severity: High
-- id: '14'
-  category: Server
-  issue: Parallel Fetching
-  keywords: parallel fetch component composition
-  platform: React/Next.js
-  description: Restructure components to parallelize data fetching in RSC
-  do: Use component composition for parallel fetches
-  don_t: Sequential fetches in parent component
-  code_example_good: <Header /><Sidebar /> // both fetch in parallel
-  code_example_bad: const header = await fetchHeader(); return <><div>{header}</div><Sidebar /></>
-  severity: Critical
-- id: '15'
-  category: Server
-  issue: After Non-blocking
-  keywords: after non-blocking logging
-  platform: React/Next.js
-  description: Use Next.js after() to schedule work after response is sent
-  do: Use after() for logging/analytics
-  don_t: Block response for non-critical operations
-  code_example_good: after(async () => { await logAction() }); return Response.json(data)
-  code_example_bad: await logAction(); return Response.json(data)
-  severity: Medium
-- id: '16'
-  category: Client
-  issue: SWR Deduplication
-  keywords: swr dedup cache revalidate
-  platform: React/Next.js
-  description: Use SWR for automatic request deduplication and caching
-  do: Use useSWR for client data fetching
-  don_t: Manual fetch in useEffect
-  code_example_good: const { data } = useSWR('/api/users', fetcher)
-  code_example_bad: useEffect(() => { fetch('/api/users').then(setUsers) }, [])
-  severity: Medium-High
-- id: '17'
-  category: Client
-  issue: Event Listener Dedup
-  keywords: event listener deduplicate global
-  platform: React/Next.js
-  description: Share global event listeners across component instances
-  do: Use useSWRSubscription for shared listeners
-  don_t: Register listener per component instance
-  code_example_good: useSWRSubscription('global-keydown', () => { window.addEventListener... })
-  code_example_bad: useEffect(() => { window.addEventListener('keydown', handler) }, [])
-  severity: Low
-- id: '18'
-  category: Rerender
-  issue: Defer State Reads
-  keywords: state read callback subscription
-  platform: React/Next.js
-  description: Don't subscribe to state only used in callbacks
-  do: Read state on-demand in callbacks
-  don_t: Subscribe to state used only in handlers
-  code_example_good: const handleClick = () => { const params = new URLSearchParams(location.search) }
-  code_example_bad: const params = useSearchParams(); const handleClick = () => { params.get('ref') }
-  severity: Medium
-- id: '19'
-  category: Rerender
-  issue: Memoized Components
-  keywords: memo extract expensive
-  platform: React/Next.js
-  description: Extract expensive work into memoized components for early returns
-  do: Extract to memo() components
-  don_t: Compute expensive values before early return
-  code_example_good: const UserAvatar = memo(({ user }) => ...); if (loading) return <Skeleton />
-  code_example_bad: const avatar = useMemo(() => compute(user)); if (loading) return <Skeleton />
-  severity: Medium
-- id: '20'
-  category: Rerender
-  issue: Narrow Dependencies
-  keywords: effect dependency primitive
-  platform: React/Next.js
-  description: Specify primitive dependencies instead of objects in effects
-  do: Use primitive values in dependency arrays
-  don_t: Use object references as dependencies
-  code_example_good: useEffect(() => { console.log(user.id) }, [user.id])
-  code_example_bad: useEffect(() => { console.log(user.id) }, [user])
-  severity: Low
-- id: '21'
-  category: Rerender
-  issue: Derived State
-  keywords: derived boolean subscription
-  platform: React/Next.js
-  description: Subscribe to derived booleans instead of continuous values
-  do: Use derived boolean state
-  don_t: Subscribe to continuous values
-  code_example_good: 'const isMobile = useMediaQuery(''(max-width: 767px)'')'
-  code_example_bad: const width = useWindowWidth(); const isMobile = width < 768
-  severity: Medium
-- id: '22'
-  category: Rerender
-  issue: Functional setState
-  keywords: functional setstate callback
-  platform: React/Next.js
-  description: Use functional setState updates for stable callbacks and no stale closures
-  do: 'Use functional form: setState(curr => ...)'
-  don_t: Reference state directly in setState
-  code_example_good: setItems(curr => [...curr, newItem])
-  code_example_bad: setItems([...items, newItem]) // items in deps
-  severity: Medium
-- id: '23'
-  category: Rerender
-  issue: Lazy State Init
-  keywords: usestate lazy initialization
-  platform: React/Next.js
-  description: Pass function to useState for expensive initial values
-  do: Use function form for expensive init
-  don_t: Compute expensive value directly
-  code_example_good: useState(() => buildSearchIndex(items))
-  code_example_bad: useState(buildSearchIndex(items)) // runs every render
-  severity: Medium
-- id: '24'
-  category: Rerender
-  issue: Transitions
-  keywords: starttransition non-urgent
-  platform: React/Next.js
-  description: Mark frequent non-urgent state updates as transitions
-  do: Use startTransition for non-urgent updates
-  don_t: Block UI on every state change
-  code_example_good: startTransition(() => setScrollY(window.scrollY))
-  code_example_bad: setScrollY(window.scrollY) // blocks on every scroll
-  severity: Medium
-- id: '25'
-  category: Rendering
-  issue: SVG Animation Wrapper
-  keywords: svg animation wrapper div
-  platform: React/Next.js
-  description: Wrap SVG in div and animate wrapper for hardware acceleration
-  do: Animate div wrapper around SVG
-  don_t: Animate SVG element directly
-  code_example_good: <div class='animate-spin'><svg>...</svg></div>
-  code_example_bad: <svg class='animate-spin'>...</svg>
-  severity: Low
-- id: '26'
-  category: Rendering
-  issue: Content Visibility
-  keywords: content-visibility auto
-  platform: React/Next.js
-  description: 'Apply content-visibility: auto to defer off-screen rendering'
-  do: Use content-visibility for long lists
-  don_t: Render all list items immediately
-  code_example_good: '.item { content-visibility: auto; contain-intrinsic-size: 0 80px }'
-  code_example_bad: Render 1000 items without optimization
-  severity: High
-- id: '27'
-  category: Rendering
-  issue: Hoist Static JSX
-  keywords: hoist static jsx element
-  platform: React/Next.js
-  description: Extract static JSX outside components to avoid re-creation
-  do: Hoist static elements to module scope
-  don_t: Create static elements inside components
-  code_example_good: const skeleton = <div class='animate-pulse' />; function C() { return skeleton }
-  code_example_bad: function C() { return <div class='animate-pulse' /> }
-  severity: Low
-- id: '28'
-  category: Rendering
-  issue: Hydration No Flicker
-  keywords: hydration mismatch flicker
-  platform: React/Next.js
-  description: Use inline script to set client-only data before hydration
-  do: Inject sync script for client-only values
-  don_t: Use useEffect causing flash
-  code_example_good: '<script dangerouslySetInnerHTML={{ __html: ''el.className = localStorage.theme'' }} />'
-  code_example_bad: useEffect(() => setTheme(localStorage.theme), []) // flickers
-  severity: Medium
-- id: '29'
-  category: Rendering
-  issue: Conditional Render
-  keywords: conditional render ternary
-  platform: React/Next.js
-  description: Use ternary instead of && when condition can be 0 or NaN
-  do: Use explicit ternary for conditionals
-  don_t: Use && with potentially falsy numbers
-  code_example_good: '{count > 0 ? <Badge>{count}</Badge> : null}'
-  code_example_bad: '{count && <Badge>{count}</Badge>} // renders ''0'''
-  severity: Low
-- id: '30'
-  category: Rendering
-  issue: Activity Component
-  keywords: activity show hide preserve
-  platform: React/Next.js
-  description: Use Activity component to preserve state/DOM for toggled components
-  do: Use Activity for expensive toggle components
-  don_t: Unmount/remount on visibility toggle
-  code_example_good: '<Activity mode={isOpen ? ''visible'' : ''hidden''}><Menu /></Activity>'
-  code_example_bad: '{isOpen && <Menu />} // loses state'
-  severity: Medium
-- id: '31'
-  category: JS Perf
-  issue: Batch DOM CSS
-  keywords: batch dom css reflow
-  platform: React/Next.js
-  description: Group CSS changes via classes or cssText to minimize reflows
-  do: Use class toggle or cssText
-  don_t: Change styles one property at a time
-  code_example_good: element.classList.add('highlighted')
-  code_example_bad: el.style.width='100px'; el.style.height='200px'
-  severity: Medium
-- id: '32'
-  category: JS Perf
-  issue: Index Map Lookup
-  keywords: map index lookup find
-  platform: React/Next.js
-  description: Build Map for repeated lookups instead of multiple .find() calls
-  do: Build index Map for O(1) lookups
-  don_t: Use .find() in loops
-  code_example_good: const byId = new Map(users.map(u => [u.id, u])); byId.get(id)
-  code_example_bad: users.find(u => u.id === order.userId) // O(n) each time
-  severity: Low-Medium
-- id: '33'
-  category: JS Perf
-  issue: Cache Property Access
-  keywords: cache property loop
-  platform: React/Next.js
-  description: Cache object property lookups in hot paths
-  do: Cache values before loops
-  don_t: Access nested properties in loops
-  code_example_good: const val = obj.config.settings.value; for (...) process(val)
-  code_example_bad: for (...) process(obj.config.settings.value)
-  severity: Low-Medium
-- id: '34'
-  category: JS Perf
-  issue: Cache Function Results
-  keywords: memoize cache function
-  platform: React/Next.js
-  description: Use module-level Map to cache repeated function results
-  do: Use Map cache for repeated calls
-  don_t: Recompute same values repeatedly
-  code_example_good: const cache = new Map(); if (cache.has(x)) return cache.get(x)
-  code_example_bad: slugify(name) // called 100 times same input
-  severity: Medium
-- id: '35'
-  category: JS Perf
-  issue: Cache Storage API
-  keywords: localstorage cache read
-  platform: React/Next.js
-  description: Cache localStorage/sessionStorage reads in memory
-  do: Cache storage reads in Map
-  don_t: Read storage on every call
-  code_example_good: if (!cache.has(key)) cache.set(key, localStorage.getItem(key))
-  code_example_bad: localStorage.getItem('theme') // every call
-  severity: Low-Medium
-- id: '36'
-  category: JS Perf
-  issue: Combine Iterations
-  keywords: combine filter map loop
-  platform: React/Next.js
-  description: Combine multiple filter/map into single loop
-  do: Single loop for multiple categorizations
-  don_t: Chain multiple filter() calls
-  code_example_good: for (u of users) { if (u.isAdmin) admins.push(u); if (u.isTester) testers.push(u) }
-  code_example_bad: users.filter(admin); users.filter(tester); users.filter(inactive)
-  severity: Low-Medium
-- id: '37'
-  category: JS Perf
-  issue: Length Check First
-  keywords: length check array compare
-  platform: React/Next.js
-  description: Check array lengths before expensive comparisons
-  do: Early return if lengths differ
-  don_t: Always run expensive comparison
-  code_example_good: if (a.length !== b.length) return true; // then compare
-  code_example_bad: a.sort().join() !== b.sort().join() // even when lengths differ
-  severity: Medium-High
-- id: '38'
-  category: JS Perf
-  issue: Early Return
-  keywords: early return exit function
-  platform: React/Next.js
-  description: Return early when result is determined to skip processing
-  do: Return immediately on first error
-  don_t: Process all items then check errors
-  code_example_good: 'for (u of users) { if (!u.email) return { error: ''Email required'' } }'
-  code_example_bad: let hasError; for (...) { if (!email) hasError=true }; if (hasError)...
-  severity: Low-Medium
-- id: '39'
-  category: JS Perf
-  issue: Hoist RegExp
-  keywords: regexp hoist module
-  platform: React/Next.js
-  description: Don't create RegExp inside render - hoist or memoize
-  do: Hoist RegExp to module scope
-  don_t: Create RegExp every render
-  code_example_good: const EMAIL_RE = /^[^@]+@[^@]+$/; function validate() { EMAIL_RE.test(x) }
-  code_example_bad: function C() { const re = new RegExp(pattern); re.test(x) }
-  severity: Low-Medium
-- id: '40'
-  category: JS Perf
-  issue: Loop Min Max
-  keywords: loop min max sort
-  platform: React/Next.js
-  description: Use loop for min/max instead of sort - O(n) vs O(n log n)
-  do: Single pass loop for min/max
-  don_t: Sort array to find min/max
-  code_example_good: let max = arr[0]; for (x of arr) if (x > max) max = x
-  code_example_bad: arr.sort((a,b) => b-a)[0] // O(n log n)
-  severity: Low
-- id: '41'
-  category: JS Perf
-  issue: Set Map Lookups
-  keywords: set map includes has
-  platform: React/Next.js
-  description: Use Set/Map for O(1) lookups instead of array.includes()
-  do: Convert to Set for membership checks
-  don_t: Use .includes() for repeated checks
-  code_example_good: const allowed = new Set(['a','b']); allowed.has(id)
-  code_example_bad: const allowed = ['a','b']; allowed.includes(id)
-  severity: Low-Medium
-- id: '42'
-  category: JS Perf
-  issue: toSorted Immutable
-  keywords: tosorted sort immutable
-  platform: React/Next.js
-  description: Use toSorted() instead of sort() to avoid mutating arrays
-  do: Use toSorted() for immutability
-  don_t: Mutate arrays with sort()
-  code_example_good: users.toSorted((a,b) => a.name.localeCompare(b.name))
-  code_example_bad: users.sort((a,b) => a.name.localeCompare(b.name)) // mutates
-  severity: Medium-High
-- id: '43'
-  category: Advanced
-  issue: Event Handler Refs
-  keywords: useeffectevent ref handler
-  platform: React/Next.js
-  description: Store callbacks in refs for stable effect subscriptions
-  do: Use useEffectEvent for stable handlers
-  don_t: Re-subscribe on every callback change
-  code_example_good: const onEvent = useEffectEvent(handler); useEffect(() => { listen(onEvent) }, [])
-  code_example_bad: useEffect(() => { listen(handler) }, [handler]) // re-subscribes
-  severity: Low
-- id: '44'
-  category: Advanced
-  issue: useLatest Hook
-  keywords: uselatest ref callback
-  platform: React/Next.js
-  description: Access latest values in callbacks without adding to dependency arrays
-  do: Use useLatest for fresh values in stable callbacks
-  don_t: Add callback to effect dependencies
-  code_example_good: const cbRef = useLatest(cb); useEffect(() => { setTimeout(() => cbRef.current()) }, [])
-  code_example_bad: useEffect(() => { setTimeout(() => cb()) }, [cb]) // re-runs
-  severity: Low