CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-addons-shallow-compare

Legacy React addon for performing shallow comparison of props and state to optimize component rendering performance

Overall
score

99%

Overview
Eval results
Files

rubric.jsonevals/scenario-9/

{
  "context": "This evaluation assesses how well the engineer uses react-addons-shallow-compare to implement performance optimization in a React component. The focus is on correctly implementing shouldComponentUpdate with shallow comparison to prevent unnecessary re-renders while allowing necessary updates.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Import shallowCompare",
      "description": "Correctly imports the shallowCompare function from react-addons-shallow-compare package",
      "max_score": 15
    },
    {
      "name": "Implement shouldComponentUpdate",
      "description": "Implements the shouldComponentUpdate lifecycle method in the UserCard component",
      "max_score": 20
    },
    {
      "name": "Use shallowCompare correctly",
      "description": "Calls shallowCompare with the correct signature: shallowCompare(this, nextProps, nextState), passing the component instance as first argument",
      "max_score": 25
    },
    {
      "name": "Return comparison result",
      "description": "Returns the boolean result from shallowCompare directly as the return value of shouldComponentUpdate",
      "max_score": 15
    },
    {
      "name": "Props comparison works",
      "description": "Component correctly prevents re-renders when parent re-renders with identical props, demonstrating that shallow comparison of props is working",
      "max_score": 15
    },
    {
      "name": "State comparison works",
      "description": "Component correctly re-renders when state changes (interaction count), demonstrating that shallow comparison of state is working",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-react-addons-shallow-compare

tile.json