Performance-Optimized User Profile Component

Build a React component that displays user profile information and optimizes rendering performance by preventing unnecessary re-renders when props or state haven't changed.

Requirements

Create a class-based React component named UserProfile that:

1. Accepts the following props:

   • userId (number): The user's ID
   • name (string): The user's name
   • email (string): The user's email address
   • avatar (string): URL to the user's avatar image

2. Maintains internal state for:

   • isExpanded (boolean): Whether the profile is in expanded or collapsed view

3. Implements performance optimization to prevent unnecessary re-renders when props and state haven't changed

4. Renders:

   • In collapsed view: displays only name and avatar
   • In expanded view: displays name, email, avatar, and user ID
   • A toggle button to switch between collapsed and expanded views

Test Cases

• When a UserProfile component receives the same props and state values it already has, it should not re-render @test

• When a UserProfile component receives different prop values (e.g., name changes from "Alice" to "Bob"), it should re-render @test

• When a UserProfile component's state changes (e.g., isExpanded toggles from false to true), it should re-render @test

• When a UserProfile component receives props with the same values but NaN appears in a prop, it should correctly handle the NaN comparison @test

Implementation

@generates

API

import React from 'react';

/**
 * A performance-optimized user profile component that prevents unnecessary re-renders.
 */
class UserProfile extends React.Component {
  constructor(props) {
    // Initialize state
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Implement performance optimization here
  }

  toggleExpanded() {
    // Toggle the isExpanded state
  }

  render() {
    // Render the component based on props and state
  }
}

export default UserProfile;

Dependencies { .dependencies }

react { .dependency }

Provides the React library for building UI components.

react-addons-shallow-compare { .dependency }

Provides shallow comparison functionality for optimizing component rendering performance.