Performance-Optimized User Card Component

Build a React class component that displays user information and optimizes rendering performance using shallow comparison techniques.

Requirements

Create a UserCard class component that:

1. Accepts props: name (string), age (number), and isActive (boolean)
2. Displays the user information (you can use any simple format)
3. Prevents unnecessary re-renders when props haven't changed
4. Must be implemented as a standard ES6 class component extending React.Component (do not use React.PureComponent)
5. Should implement the shouldComponentUpdate lifecycle method to control when re-renders occur

The component should only re-render when prop values actually change, not when the parent re-renders with identical prop values.

Test Cases

• When the parent re-renders with identical props, the UserCard should not re-render @test
• When the parent re-renders with different props, the UserCard should re-render @test
• The component correctly handles NaN values in props without causing unnecessary re-renders @test

Implementation

@generates

API

/**
 * UserCard component displays user information with optimized rendering.
 *
 * @class UserCard
 * @extends {React.Component}
 */
class UserCard extends React.Component {
  /**
   * Renders the user card with name, age, and active status.
   *
   * @returns {React.Element} The rendered user card
   */
  render() {
    // Implementation
  }
}

export default UserCard;

Dependencies { .dependencies }

react-addons-shallow-compare { .dependency }

Provides shallow comparison functionality for component optimization.

react { .dependency }

React library for building the component.