CtrlK
CommunityDocumentationLog inGet started
Tessl Logo

tessl/npm-types--react

tessl install tessl/npm-types--react@19.1.0

TypeScript 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%

rubric.jsonevals/scenario-9/

{
  "context": "This criteria evaluates how well the engineer uses React's Context API and performance optimization hooks to implement a split context pattern with memoization. The focus is on proper usage of createContext, useContext, useMemo, and useState to prevent unnecessary re-renders.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Split Context Creation",
      "description": "Uses createContext to create two separate contexts: one for preferences state and one for update functions (actions). This separation is the foundation of the split context pattern.",
      "max_score": 25
    },
    {
      "name": "State Hook Usage",
      "description": "Uses useState hook to manage the preferences state object containing theme, language, and notifications properties with correct initial values (theme: 'light', language: 'en', notifications: true).",
      "max_score": 10
    },
    {
      "name": "Actions Memoization",
      "description": "Uses useMemo to memoize the actions object (updateTheme, updateLanguage, updateNotifications) so that the actions reference remains stable across re-renders and doesn't cause consumers to re-render.",
      "max_score": 20
    },
    {
      "name": "State Value Memoization",
      "description": "Either passes the state value directly (which naturally changes on updates) or appropriately handles the state context value. The state context should properly reflect changes when preferences are updated.",
      "max_score": 10
    },
    {
      "name": "Context Consumption",
      "description": "Uses useContext hook in consumer components (ThemeDisplay, LanguageSelector, PreferencesForm) to access the preferences state and/or actions from the appropriate context providers.",
      "max_score": 15
    },
    {
      "name": "Provider Implementation",
      "description": "Implements PreferencesProvider component that renders both context Providers (state and actions) with correct values and wraps the children prop.",
      "max_score": 15
    },
    {
      "name": "TypeScript Types",
      "description": "Properly types the context values using TypeScript, including the Preferences interface, PreferencesActions interface, and correct typing of createContext calls with appropriate default values or null.",
      "max_score": 5
    }
  ]
}

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@types/react@19.1.x
tile.json