tessl install tessl/npm-types--react@19.1.0TypeScript definitions for React, the popular JavaScript library for building user interfaces
Agent Success
Agent success rate when using this tile
80%
Improvement
Agent success rate improvement when using this tile compared to baseline
1.48x
Baseline
Agent success rate without this tile
54%
{
"context": "This criteria evaluates how well the engineer uses React's useMemo and useCallback hooks to optimize component performance in the DataGrid component. The focus is on proper memoization of expensive computations and callback functions to prevent unnecessary re-renders and re-computations.",
"type": "weighted_checklist",
"checklist": [
{
"name": "useMemo for filtering",
"description": "Uses the useMemo hook to memoize the filtered data array, with the data and searchTerm as dependencies, preventing unnecessary filtering operations when other props change",
"max_score": 25
},
{
"name": "useMemo for statistics",
"description": "Uses the useMemo hook to memoize computed statistics (such as average age), with only the data array as a dependency, ensuring statistics are recalculated only when data changes",
"max_score": 25
},
{
"name": "useCallback for handlers",
"description": "Uses the useCallback hook to memoize the delete handler or any event handlers passed to child components, with appropriate dependencies, ensuring referential stability across re-renders",
"max_score": 25
},
{
"name": "Correct dependencies",
"description": "All useMemo and useCallback hooks specify the correct dependency arrays that include all referenced variables from outer scope and exclude unnecessary dependencies",
"max_score": 15
},
{
"name": "Appropriate usage",
"description": "Uses memoization hooks only where beneficial (for expensive computations or preventing child re-renders) and avoids over-optimization of trivial operations",
"max_score": 10
}
]
}