React Performance

Detects React patterns that cause unnecessary re-renders. Disabled by default (noisy).

Rule ID:react-performance

Examples#

BadArray index keys, setState in loop, inline objects

// Array index as key
{items.map((item, index) => (
  <ListItem key={index} item={item} />  // BAD: index as key
))}

// setState inside loop
items.forEach(item => {
  setCount(prev => prev + item.value);  // Multiple re-renders!
});

// Inline object creates new reference every render
<Chart options={{ color: 'red', size: 12 }} />

// Component defined inside another component
function Parent() {
  function Child() {  // Recreated every render!
    return <div>child</div>;
  }
  return <Child />;
}

GoodStable keys, batched updates, extracted constants

// Stable unique key
{items.map(item => (
  <ListItem key={item.id} item={item} />
))}

// Batch state update
const total = items.reduce((sum, item) => sum + item.value, 0);
setCount(prev => prev + total);  // Single re-render

// Extracted constant
const CHART_OPTIONS = { color: 'red', size: 12 };
<Chart options={CHART_OPTIONS} />

// Component defined outside
function Child() {
  return <div>child</div>;
}
function Parent() {
  return <Child />;
}

What It Detects#

highArray index as key in .map()

Using array index as key causes issues with list reordering

Fix: Use a stable unique identifier (item.id) as the key.

highuseEffect with empty deps but references external values

useEffect with empty deps may have stale closure over props/state

Fix: Add dependencies to the array.

highsetState inside loop (.forEach/.map)

setState inside loop causes multiple re-renders

Fix: Batch state updates: collect all changes first, then set state once.

mediumComponent defined inside another component

Component defined inside another component is recreated every render

Fix: Move the component outside, or use useMemo().

mediumInline objects/arrays in JSX props

Inline {type} creates new reference on every render

Fix: Extract to a constant or use useMemo().

Configuration#

This rule is disabled by default. To enable it:

.vibertestrc.jsonjson

{
  "rules": {
    "react-performance": {
      "enabled": true
    }
  }
}

#023 Missing Production Basics