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-3/

{
  "context": "Tests whether the agent proactively applies correct useEffect patterns (cleanup, functional updaters, no derived state in useEffect) and accessibility when building a polling component. The task says nothing about cleanup, stale closures, functional updaters, or role=alert.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Interval cleanup in useEffect",
      "description": "The useEffect that sets up the polling interval returns a cleanup function that calls clearInterval to stop polling on unmount or when dependencies change. The agent was NOT asked about cleanup.",
      "max_score": 16
    },
    {
      "name": "Functional updater for state in interval",
      "description": "State updates inside the setInterval callback use the functional updater form (setNotifications(prev => ...)) rather than directly referencing the state variable, to avoid stale closure bugs. The agent was NOT asked about stale closures.",
      "max_score": 14
    },
    {
      "name": "Unread count not in useEffect",
      "description": "The unread notification count is computed during render (inline or with useMemo), NOT via useEffect updating a separate state variable. The agent was NOT asked about derived state patterns.",
      "max_score": 14
    },
    {
      "name": "No object in useEffect deps",
      "description": "The useEffect dependency array does not contain objects or functions that would cause it to fire every render.",
      "max_score": 10
    },
    {
      "name": "Stable keys on notification items",
      "description": "Notification items rendered in .map() use notification.id as the key prop, NOT the array index.",
      "max_score": 10
    },
    {
      "name": "Error handling with role=alert",
      "description": "If polling or the simulated fetch can fail, an error state is rendered with role=\"alert\". Even if the simulation cannot fail, error handling patterns should be present. The agent was NOT asked about error handling or accessibility.",
      "max_score": 10
    },
    {
      "name": "aria-live on unread count",
      "description": "The unread count region uses aria-live=\"polite\" so screen readers announce when the count changes. The agent was NOT asked about accessibility.",
      "max_score": 10
    },
    {
      "name": "TypeScript interfaces for props",
      "description": "Component props and notification data types are defined with TypeScript interfaces. No use of 'any'.",
      "max_score": 6
    },
    {
      "name": "Loading state on initial render",
      "description": "A loading indicator is shown before the first poll completes or initial data is available.",
      "max_score": 6
    },
    {
      "name": "Props destructured in signature",
      "description": "Function components destructure their props in the function parameter.",
      "max_score": 4
    }
  ]
}

evals

tile.json