React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization
87
80%
Does it follow best practices?
Impact
99%
1.83xAverage score across 5 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent proactively applies memoization coordination, proper key props, derived state patterns, and accessibility when building a filterable/sortable table. The task says nothing about React.memo, useCallback, useMemo, aria-live, or avoiding useEffect for derived state.",
"type": "weighted_checklist",
"checklist": [
{
"name": "ProductRow wrapped in React.memo",
"description": "The ProductRow component is wrapped in React.memo to prevent unnecessary re-renders when the parent re-renders due to filter/sort changes. The agent was NOT asked about memoization or performance.",
"max_score": 14
},
{
"name": "Flag handler stabilized with useCallback",
"description": "The 'Flag for reorder' callback passed from InventoryTable to each ProductRow is stabilized with useCallback, so React.memo on ProductRow is effective. The agent was NOT asked about useCallback.",
"max_score": 14
},
{
"name": "Filtered/sorted list computed with useMemo or inline",
"description": "The filtered and sorted product list is computed with useMemo or as an inline computation during render. It is NOT computed via useEffect updating a separate state variable.",
"max_score": 14
},
{
"name": "No useEffect for derived state",
"description": "No useEffect is used to compute values derivable from existing state (filtered list, result count, totals). Uses useMemo or direct computation instead.",
"max_score": 10
},
{
"name": "Stable keys on product rows",
"description": "Product rows use product.id as the key prop, NOT the array index.",
"max_score": 12
},
{
"name": "No inline objects to memoized children",
"description": "No inline object or array literals are passed as props to the React.memo ProductRow component (which would defeat memoization).",
"max_score": 10
},
{
"name": "aria-live on result count",
"description": "The result count or filter summary region uses aria-live=\"polite\" so screen readers announce changes when the user types in the filter. The agent was NOT asked about accessibility.",
"max_score": 10
},
{
"name": "TypeScript interfaces for props",
"description": "Component props and product data are typed with TypeScript interfaces. No use of 'any'.",
"max_score": 6
},
{
"name": "useCallback NOT used for native-only callbacks",
"description": "useCallback is NOT used on callbacks that are only passed to native DOM elements (like the filter input onChange). It is only used for callbacks passed to React.memo children.",
"max_score": 6
},
{
"name": "Props destructured in signature",
"description": "Function components destructure their props in the function parameter.",
"max_score": 4
}
]
}