react-render-antipatterns-skill

What I do

I detect and fix anti-patterns specific to React render-time behavior that cause production incidents:

1. JSX Render Pitfalls: Missing fragment keys in .map(), unsafe JSON.parse in drag-and-drop handlers
2. State-Driven Render Issues: Inconsistent visibility toggle strategies mixing hard-removal with runtime filtering
3. Recommended Pattern: Theme-driven component design using CSS custom properties only

When to use me

Use this skill when:

• Debugging React key warnings in list rendering
• Fixing UI crashes from malformed drag-and-drop data
• Auditing inconsistent component visibility patterns
• Implementing theme-driven (light/dark mode) component design
• Reviewing React render-time code for production-readiness

Related Skills

• react-hooks-antipatterns-skill: Peer — covers hook lifecycle anti-patterns (stale state, StrictMode double-execution, useCallback/useMemo traps). This skill covers render-time anti-patterns.
• accessibility-a11y-skill: ARIA patterns for dynamic error banners. This skill handles React render correctness.
• frontend-design-skill: UI aesthetics and layout. This skill handles runtime correctness.
• uiux-review-skill: Visual/UX review of rendered output. This skill handles the code-level anti-patterns that cause render bugs.

---

A. JSX Render Pitfalls

A1. fragment-key-in-map — Missing List Keys

<> shorthand Fragment in .map() can't accept key.

Before (warning):

{items.map((item) => (
  <>
    <span>{item.name}</span>
    <span>{item.value}</span>
  </>
))}

After (correct):

import { Fragment } from 'react'

{items.map((item) => (
  <Fragment key={item.id}>
    <span>{item.name}</span>
    <span>{item.value}</span>
  </Fragment>
))}

A2. unsafe-json-parse-event-handler — UI Crash on Malformed Data

JSON.parse in drag-and-drop handlers crashes UI on malformed data.