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

{
  "context": "This criteria evaluates the engineer's ability to use react-addons-shallow-compare to optimize React component rendering, specifically focusing on correct handling of NaN values in props comparison. The key skill being tested is understanding how shallowCompare uses Object.is() semantics to correctly treat NaN values as equal.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Import shallowCompare",
      "description": "Correctly imports the shallowCompare function from the react-addons-shallow-compare package",
      "max_score": 15
    },
    {
      "name": "Implement shouldComponentUpdate",
      "description": "Implements the shouldComponentUpdate lifecycle method in the NumericValidator class component",
      "max_score": 20
    },
    {
      "name": "Use shallowCompare correctly",
      "description": "Calls shallowCompare with correct arguments (this, nextProps, nextState) inside shouldComponentUpdate and returns its result",
      "max_score": 30
    },
    {
      "name": "NaN equality behavior",
      "description": "The implementation correctly prevents re-renders when NaN values remain unchanged in props, demonstrating understanding that shallowCompare treats NaN === NaN as true",
      "max_score": 25
    },
    {
      "name": "Trigger re-renders on change",
      "description": "The implementation correctly triggers re-renders when props change from non-NaN to NaN or vice versa, showing proper integration of shallowCompare",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

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

tile.json