Blog post Leaderboard MCP Deploy agents
Back to all reviewers

Optimize React components

RooCodeInc/Roo-Code
Based on 4 comments
TSX

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.

React TSX

Reviewer Prompt

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.
{/* Avoid this */}
{patterns.map((item, index) => (
  <div key={`${item.pattern}-${index}`} className="ml-5 flex items-center gap-2">
    {/* content */}
  </div>
))}

{/* Prefer this */}
{patterns.map((item) => (
  <div key={item.pattern} className="ml-5 flex items-center gap-2">
    {/* content */}
  </div>
))}
  1. Memoize computed values and callbacks - Use React.useMemo() for arrays/objects and useCallback() for functions to prevent unnecessary recreations during renders.
// Avoid recreating arrays/objects on every render
const toolGroups = React.useMemo(() => [
  // array contents
], [/* dependencies */]);
  1. Use React refs instead of direct DOM manipulation - Avoid document.querySelector and similar methods in favor of React’s ref system.
// Instead of:
const enhanceButton = document.querySelector('[aria-label*="enhance"]');

// Prefer:
const enhanceButtonRef = useRef(null);
// Then pass the ref to the component
<Button ref={enhanceButtonRef} aria-label="enhance" />
  1. Simplify state management - Keep state minimal and focused on what’s needed. Use simple values over complex collections when possible.
// Instead of tracking all instances in a collection:
const [followUpAnswered, setFollowUpAnswered] = useState<Set<number>>(new Set());

// Consider tracking just what's needed:
const [currentFollowUpTs, setCurrentFollowUpTs] = useState<number | null>(null);
4
Comments Analyzed
TSX
Primary Language
React
Category

Source Discussions