Optimizing React Component Rendering with React.memo and useMemo

React's re-rendering behavior can significantly impact application performance, especially with complex components and frequent updates. This challenge focuses on implementing render optimization techniques – specifically React.memo and useMemo – to prevent unnecessary re-renders and improve overall efficiency. You'll be given a component that re-renders frequently, and your task is to optimize it using these tools.

Problem Description

You are given a ProductList component that displays a list of products. Each product has a name, price, and a quantity. The ProductList component receives a products array as a prop. The problem is that the ProductList and its child components (ProductItem) re-render even when the products array hasn't changed, leading to performance bottlenecks. Your task is to optimize the ProductList and ProductItem components to prevent unnecessary re-renders.

What needs to be achieved:

• Prevent ProductList from re-rendering if the products prop hasn't changed (shallow comparison).
• Prevent ProductItem from re-rendering if its individual product data hasn't changed.
• Optimize the calculation of the total price for each product using useMemo.

Key Requirements:

• Use React.memo to memoize both ProductList and ProductItem.
• Use useMemo within ProductItem to memoize the calculated total price (price * quantity).
• Ensure the component still functions correctly and displays the product data accurately.

Expected Behavior:

• When the products array changes, both ProductList and all ProductItem components should re-render.
• When the products array remains the same (same references), ProductList should not re-render, and neither should any ProductItem components unless their individual product data changes.
• The total price calculation within ProductItem should only re-run when the product's price or quantity changes.

Edge Cases to Consider:

• Empty products array.
• Products with zero quantity.
• Products with very large quantities or prices (consider potential overflow issues, though not a primary focus).

Examples

Example 1:

Input: products = [{ name: "Apple", price: 1, quantity: 2 }, { name: "Banana", price: 0.5, quantity: 5 }]
Output:  The ProductList component renders, displaying "Apple (Total: $2.00)" and "Banana (Total: $2.50)".
Explanation: Initial render.

Input: products = [{ name: "Apple", price: 1, quantity: 2 }, { name: "Banana", price: 0.5, quantity: 5 }] (same array reference)
Output: The ProductList component does *not* re-render.  The ProductItem components also do not re-render.
Explanation:  The array reference is the same, so memoization prevents re-renders.

Input: products = [{ name: "Apple", price: 1.2, quantity: 2 }, { name: "Banana", price: 0.5, quantity: 5 }]
Output: The ProductList component re-renders, displaying "Apple (Total: $2.40)" and "Banana (Total: $2.50)".
Explanation: The 'Apple' product's price has changed, triggering a re-render of ProductList and ProductItem for Apple.

Example 2:

Input: products = []
Output: The ProductList component renders, displaying an empty list.
Explanation: Handles the edge case of an empty product list.

Constraints

• The solution must be written in TypeScript.
• You must use React.memo and useMemo.
• The solution should be performant and avoid unnecessary re-renders.
• The solution should be readable and well-structured.
• Assume React v16.8 or later.

Notes

• Shallow comparison is sufficient for determining if the products array has changed.
• Consider the dependencies of useMemo carefully to ensure the memoized value is only recalculated when necessary.
• Focus on preventing re-renders of the entire component tree when only a small part of the data has changed. This is the core of render optimization.
• You will be provided with the initial component structure. Your task is to modify it to incorporate the optimization techniques.