Optimized Emoji Reaction Panel

Build a React component that displays emoji reactions with optimized performance characteristics. The component should render a list of reactions (emojis with counts) and a button to add new reactions via an emoji picker.

Requirements

Component Structure

Create a ReactionPanel component that:

• Displays a list of reactions where each reaction shows an emoji and its count
• Includes an "Add Reaction" button that toggles an emoji picker
• Updates reaction counts when users select an emoji (increments if exists, adds with count 1 if new)
• Should be optimized to minimize unnecessary re-renders

Performance Considerations

The component should be designed with performance in mind:

• The reaction list should avoid unnecessary re-renders when the picker visibility changes
• The emoji picker should avoid unnecessary re-renders when reaction data changes
• Use appropriate React optimization techniques to achieve this

Interaction Flow

1. User clicks "Add Reaction" button → emoji picker appears
2. User selects an emoji from the picker → reaction is added/incremented and picker closes
3. If the emoji already exists in reactions, increment its count
4. If the emoji is new, add it with count 1

Test Cases

• When the picker visibility toggle changes, the reaction list component should not re-render @test
• When reaction data changes, the emoji picker wrapper should not re-render @test
• Selecting an emoji increments its count if it already exists @test
• Selecting a new emoji adds it with count 1 @test

Implementation

@generates

API

interface Reaction {
  emoji: string;
  count: number;
}

interface ReactionPanelProps {
  initialReactions?: Reaction[];
}

export function ReactionPanel(props: ReactionPanelProps): JSX.Element;

Dependencies { .dependencies }

emoji-picker-react { .dependency }

Provides the emoji picker component.