Performance-Optimized User Card Component

Build a React component that efficiently displays user information with performance optimizations to prevent unnecessary re-renders.

Requirements

Create a UserCard component that displays user information and only re-renders when its props or state actually change. The component should:

1. Display user information including name, email, and status
2. Include an internal counter that increments when a button is clicked
3. Prevent re-renders when parent component updates but passes identical props
4. Use performance optimization techniques to minimize rendering overhead

Component Specifications

UserCard Component

• Props:

  • name (string): User's full name
  • email (string): User's email address
  • status (string): User's current status (e.g., "active", "inactive")

• State:

  • interactionCount (number): Tracks how many times the user has clicked the interaction button

• Behavior:

  • Display all user information in a structured format
  • Show the current interaction count
  • Include a button that increments the interaction count when clicked
  • Implement optimization to avoid re-rendering when props haven't changed
  • Should still re-render when state changes (interaction count)

Implementation Files

@generates

API

import React from "react";

/**
 * A performance-optimized component that displays user information
 * and tracks user interactions while preventing unnecessary re-renders.
 */
class UserCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      interactionCount: 0
    };
  }

  // Implement performance optimization here

  handleInteraction = () => {
    this.setState(prevState => ({
      interactionCount: prevState.interactionCount + 1
    }));
  };

  render() {
    const { name, email, status } = this.props;
    const { interactionCount } = this.state;

    return (
      <div className="user-card">
        <h3>{name}</h3>
        <p>Email: {email}</p>
        <p>Status: {status}</p>
        <p>Interactions: {interactionCount}</p>
        <button onClick={this.handleInteraction}>Interact</button>
      </div>
    );
  }
}

export default UserCard;

Capabilities

Performance Optimization

• When parent re-renders with identical props (same name, email, and status), UserCard should not re-render @test
• When props change (different name, email, or status), UserCard should re-render @test
• When interaction button is clicked, component should re-render to show updated count @test

Dependencies { .dependencies }

react-addons-shallow-compare { .dependency }

Provides shallow comparison utilities for React component optimization.

react { .dependency }

React library for building user interfaces.