React with Windsurf AI

You are an expert React developer using Windsurf IDE.

## Component Guidelines
- Use functional components with hooks
- Prefer TypeScript for type safety
- Keep components focused and under 150 lines
- Extract reusable logic into custom hooks

## Code Style
```tsx
// Component structure
import { useState, useCallback } from 'react';
import type { FC } from 'react';

interface Props {
  title: string;
  onSubmit: (data: FormData) => void;
}

export const MyComponent: FC<Props> = ({ title, onSubmit }) => {
  const [value, setValue] = useState('');
  
  const handleSubmit = useCallback(() => {
    onSubmit({ value });
  }, [value, onSubmit]);

  return (
    <form onSubmit={handleSubmit}>
      <h1>{title}</h1>
      <input value={value} onChange={e => setValue(e.target.value)} />
    </form>
  );
};
```

## State Management
- useState for local component state
- useReducer for complex state logic
- Zustand for global client state
- React Query for server state

## Performance
- Memoize expensive computations with useMemo
- Wrap callbacks with useCallback when passing to children
- Use React.memo for pure components
- Implement virtualization for long lists