Pitfalls react

Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/barissozen/pitfalls-react

🧠 The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.

Install

npx -y skills add ComeOnOliver/skillshub --skill pitfalls-react

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

React component patterns, forms, accessibility, and responsive design. Use when building React components, handling forms, or ensuring accessibility. Triggers on: React component, useEffect, form validation, a11y, responsive, Error Boundary.

SKILL.md

4.0 KB, as published. Nobody here has run it

React Pitfalls

Common pitfalls and correct patterns for React development.

When to Use

Building React components
Implementing form validation
Adding error boundaries
Ensuring accessibility (a11y)
Creating responsive layouts
Reviewing React code

Workflow

Step 1: Check Component Patterns

Verify loading/error states and data checks.

Step 2: Verify Form Validation

Ensure Zod schemas and proper error display.

Step 3: Check Accessibility

Verify ARIA labels and keyboard navigation.

Component Patterns

// ✅ Define helpers before use or as exports
function formatPrice(price: number) { ... }

export default function Component() {
  // ✅ Check data exists before accessing
  if (!data) return <Loading />;

  // ✅ useEffect for side effects only
  useEffect(() => {
    fetchData();
  }, []);

  // ✅ data-testid on interactive elements
  return <button data-testid="submit-btn">Submit</button>;
}

// ❌ WRONG: Defining function in render
return <button onClick={() => {
  function doSomething() { } // Don't define here
  doSomething();
}}>

// ✅ Navigation with router, not window
import { Link, useLocation } from 'wouter';
<Link to="/dashboard">Go</Link>
// ❌ window.location.href = '/dashboard'

Error Boundary

// ✅ Wrap major components in error boundaries
class ErrorBoundary extends React.Component {
  state = { hasError: false, error: null };

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, info) {
    logError({ error, componentStack: info.componentStack });
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback onRetry={() => this.setState({ hasError: false })} />;
    }
    return this.props.children;
  }
}

// ✅ Graceful degradation
function Dashboard() {
  const { data, error, isLoading } = useQuery(...);

  if (isLoading) return <Skeleton />;
  if (error) return <ErrorCard message="Unable to load" onRetry={refetch} />;
  if (!data) return <EmptyState />;

  return <DashboardContent data={data} />;
}

Form Validation

// ✅ Zod schemas for all forms
const createStrategySchema = z.object({
  name: z.string().min(1, 'Name required').max(100),
  type: z.enum(['cross-exchange', 'triangular']),
  minProfit: z.number().positive('Must be positive'),
});

// ✅ React Hook Form with Zod
const form = useForm<z.infer<typeof createStrategySchema>>({
  resolver: zodResolver(createStrategySchema),
});

// ✅ Show errors inline
{errors.name && <span className="text-red-500">{errors.name.message}</span>}

// ✅ Disable submit while validating/submitting
<button disabled={isSubmitting || !isValid}>Submit</button>

Responsive Layout

/* ✅ Mobile-first breakpoints */
.container { padding: 1rem; }

@media (min-width: 768px) {
  .container { padding: 2rem; }
}

/* ✅ Touch-friendly button sizes (min 44px) */
.btn { min-height: 44px; min-width: 44px; }

/* ✅ Horizontal scroll for data tables on mobile */
.table-container { overflow-x: auto; }

Accessibility (a11y)

// ✅ Semantic HTML
<nav>...</nav>
<main>...</main>
<button>Click me</button>  // Not <div onClick>

// ✅ ARIA labels
<button aria-label="Close dialog">×</button>

// ✅ Keyboard navigation
<button onKeyDown={(e) => e.key === 'Enter' && handleClick()}>

// ✅ Focus indicators
button:focus { outline: 2px solid blue; outline-offset: 2px; }

Quick Checklist

Loading/error states handled
data-testid on interactive elements
Using router Link, not window.location
Helper functions defined before use
Error boundaries on major components
Touch targets ≥ 44px
ARIA labels on icon buttons