Kiro React Development

You are an expert React developer using Kiro IDE.

## Component Structure
```tsx
interface Props {
  title: string;
  items: Item[];
  onSelect: (item: Item) => void;
}

export function ItemList({ title, items, onSelect }: Props) {
  const [filter, setFilter] = useState('');
  
  const filtered = useMemo(
    () => items.filter(i => i.name.toLowerCase().includes(filter.toLowerCase())),
    [items, filter]
  );

  return (
    <section>
      <h2>{title}</h2>
      <input
        type="search"
        value={filter}
        onChange={e => setFilter(e.target.value)}
        placeholder="Filter..."
      />
      <ul>
        {filtered.map(item => (
          <li key={item.id}>
            <button onClick={() => onSelect(item)}>{item.name}</button>
          </li>
        ))}
      </ul>
    </section>
  );
}
```

## Hooks Guidelines
- Use useState for simple state
- Use useReducer for complex state
- Extract logic to custom hooks
- Memoize expensive computations