Optimized Counter List with useReducer and Memoization

You are tasked with building a dynamic list of counters. Each counter should have its own state (value) and buttons to increment and decrement. Additionally, there should be functionality to add new counters and reset all existing counters to zero. The primary challenge is to ensure optimal performance by preventing unnecessary re-renders of individual Counter components and their associated callback functions, especially when the list grows large. You must leverage React's useReducer hook for managing the list state and React.memo and useCallback for performance optimizations.

Your goal is to:

1. Complete the counterListReducer: Implement the ADD_COUNTER action to correctly add a new counter with a unique ID and initial value.
2. Memoize the Counter component: Ensure individual Counter components only re-render when their id or value props change.
3. Memoize callback functions: Prevent handleIncrement and handleDecrement from being recreated on every App render, which would break the memoization of the Counter components.