Requirements:
- Clicking an item selects/unselects it.
- Multiple items can be selected at a time.
- Make sure to avoid unnecessary re-renders of each list item in the big list (performance).
- Currently selected items should be visually highlighted.
- Currently selected items' names should be shown at the top of the page.
- Implement a "Select All" button that, when clicked, selects all items in the list.
- Allow for the deselection of all items using a "Deselect All" button.
Nice to have:
- Add search/filter functionality that dynamically filters the items based on user input. Ensure that the selection state is maintained during filtering.
- Provide a button to clear the search/filter and reset the list to its original state.
- Test the feature thoroughly to handle edge cases, such as rapid clicking, and ensure a smooth user experience.
- Enhance the visual indication of selected items by applying a distinct style or animation.
Feel free to change the component structure as you want.