Product List Component with Render Optimization

Build a React class component that displays a list of products with optimized rendering to prevent unnecessary re-renders when parent components update but product data hasn't changed.

Requirements

Create a ProductList class component that:

1. Accepts products prop - an array of product objects, where each product has id, name, and price properties
2. Accepts currency prop - a string representing the currency symbol (e.g., "$", "€")
3. Implements render optimization to prevent re-rendering when props haven't changed
4. Renders each product showing its name and formatted price with the currency symbol

The component should re-render only when:

• The products array reference changes
• The currency prop value changes

The component should NOT re-render when:

• Parent component re-renders but passes the same products array reference
• Parent component re-renders but passes the same currency value

Implementation

@generates

API

import React from 'react';

/**
 * A product list component with optimized rendering
 */
class ProductList extends React.Component {
  render() {
    // IMPLEMENTATION HERE
  }
}

export default ProductList;

Test Cases

• Renders all products with correct names and prices @test
• Does not re-render when parent re-renders with same props @test
• Re-renders when products array reference changes @test
• Re-renders when currency prop changes @test

Dependencies { .dependencies }

react { .dependency }

Provides React component functionality.

react-addons-shallow-compare { .dependency }

Provides shallow comparison support for render optimization.