react

When to use this skill

Use this skill whenever the user wants to:

• Build user interfaces with React components and JSX
• Manage component state and lifecycle with hooks
• Create reusable, composable React components
• Use Context API or state management libraries (Redux, Zustand)
• Set up React projects with Vite or Create React App
• Implement routing with React Router
• Optimize rendering performance (React.memo, useMemo, lazy loading)

How to use this skill

Workflow

1. Identify the request area (component creation, state management, routing, performance, etc.)
2. Apply React best practices following the official documentation patterns
3. Generate JSX/TSX code using functional components and hooks
4. Verify the component tree renders correctly and state flows are clean

1. Functional Component

import { useState } from 'react';

interface UserCardProps {
  name: string;
  email: string;
  onSelect: (name: string) => void;
}

export function UserCard({ name, email, onSelect }: UserCardProps) {
  return (
    <div className="user-card" onClick={() => onSelect(name)}>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

2. State and Effects

import { useState, useEffect } from 'react';

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. Custom Hook

import { useState, useCallback } from 'react';

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

4. Context Pattern

import { createContext, useContext, useState, ReactNode } from 'react';

const ThemeContext = createContext<{ dark: boolean; toggle: () => void } | null>(null);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [dark, setDark] = useState(false);
  const toggle = () => setDark(d => !d);
  return <ThemeContext.Provider value={{ dark, toggle }}>{children}</ThemeContext.Provider>;
}

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
}

Best Practices

• Keep components small and focused on a single responsibility
• Lift state up to the nearest common ancestor; use Context for deeply shared state
• Always provide a stable key prop when rendering lists
• Clean up side effects in useEffect return functions (subscriptions, timers)
• Avoid creating new objects/functions inline in JSX to prevent unnecessary re-renders
• Use React.lazy and Suspense for code-splitting large routes

Resources

• Official documentation: https://react.dev/
• React hooks reference: https://react.dev/reference/react
• Create React App: https://create-react-app.dev/

Keywords

react, React Hooks, JSX, TSX, components, state, props, useEffect, useState, Context API, functional components, performance, memo, lazy loading