Apply these React optimization techniques to improve component performance and maintainability:
1. **Use stable, unique keys for list items** - Avoid using array indices as keys when rendering lists that can change. Instead, use unique identifiers from your data.
```jsx
{/* Avoid this */}
{patterns.map((item, index) => (
{/* content */}
))}
{/* Prefer this */}
{patterns.map((item) => (
{/* content */}
))}
```
2. **Memoize computed values and callbacks** - Use React.useMemo() for arrays/objects and useCallback() for functions to prevent unnecessary recreations during renders.
```jsx
// Avoid recreating arrays/objects on every render
const toolGroups = React.useMemo(() => [
// array contents
], [/* dependencies */]);
```
3. **Use React refs instead of direct DOM manipulation** - Avoid document.querySelector and similar methods in favor of React's ref system.
```jsx
// Instead of:
const enhanceButton = document.querySelector('[aria-label*="enhance"]');
// Prefer:
const enhanceButtonRef = useRef(null);
// Then pass the ref to the component
```
4. **Simplify state management** - Keep state minimal and focused on what's needed. Use simple values over complex collections when possible.
```jsx
// Instead of tracking all instances in a collection:
const [followUpAnswered, setFollowUpAnswered] = useState>(new Set());
// Consider tracking just what's needed:
const [currentFollowUpTs, setCurrentFollowUpTs] = useState(null);
```