{
  "context": "This criteria evaluates how well the engineer leverages emoji-picker-react's performance optimization features, specifically React.memo and memoization techniques, to build a reaction panel that minimizes unnecessary re-renders.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "EmojiPicker Import",
      "description": "Correctly imports the EmojiPicker component from emoji-picker-react using default import (e.g., import EmojiPicker from 'emoji-picker-react')",
      "max_score": 10
    },
    {
      "name": "React.memo Usage",
      "description": "Uses React.memo to wrap sub-components (reaction list and/or emoji picker wrapper) to prevent unnecessary re-renders",
      "max_score": 30
    },
    {
      "name": "Memoization Strategy",
      "description": "Implements proper memoization strategy using React.useMemo or React.useCallback for callbacks and derived values to prevent re-renders",
      "max_score": 25
    },
    {
      "name": "Component Separation",
      "description": "Properly separates concerns by creating distinct sub-components for the reaction list and emoji picker wrapper to enable independent re-render optimization",
      "max_score": 15
    },
    {
      "name": "onEmojiClick Handler",
      "description": "Correctly implements the onEmojiClick callback from EmojiPicker to handle emoji selection and update reaction state appropriately",
      "max_score": 15
    },
    {
      "name": "State Management",
      "description": "Manages state for reactions and picker visibility correctly, ensuring updates trigger appropriate re-renders only where needed",
      "max_score": 5
    }
  ]
}