CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/react-patterns

React patterns — always apply error boundaries, loading states, accessible markup, proper hooks, controlled forms, stable keys, and correct memoization

87

1.83x
Quality

80%

Does it follow best practices?

Impact

99%

1.83x

Average score across 5 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

criteria.jsonevals/scenario-2/

{
  "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
    }
  ]
}

evals

tile.json