React Batch Processing System

This challenge asks you to build a simple batch processing system within a React application. The system should allow users to input a list of tasks, group them into batches of a specified size, and display the batches. This is a common pattern in applications dealing with large datasets or computationally intensive operations, allowing for efficient processing and improved user experience.

Problem Description

You need to create a React component that manages a list of tasks and batches them into groups of a specified batch size. The component should:

1. Task Input: Provide an input field where users can add tasks (strings). Each task should be added to a list of pending tasks.
2. Batch Size Control: Include a number input field where users can specify the desired batch size. The batch size should be a positive integer.
3. Batching Logic: Implement logic to group the pending tasks into batches based on the specified batch size. When a new task is added or the batch size is changed, the batches should be recalculated and re-rendered.
4. Display Batches: Display the created batches in a clear and organized manner. Each batch should be presented as a separate list, showing the tasks within that batch.
5. Error Handling: Handle invalid batch sizes (e.g., non-positive integers) gracefully, displaying an appropriate error message to the user.

Expected Behavior:

• When a new task is entered and added, the pending tasks list updates, and the batches are recalculated.
• When the batch size is changed, the pending tasks are re-batched according to the new size.
• If the batch size is invalid, an error message is displayed, and the batches are not updated.
• The UI should be responsive and update in real-time as tasks are added and the batch size is modified.

Examples

Example 1:

Input: Pending Tasks: ["Task 1", "Task 2", "Task 3", "Task 4"], Batch Size: 2
Output:
Batch 1: ["Task 1", "Task 2"]
Batch 2: ["Task 3", "Task 4"]
Explanation: The tasks are divided into two batches of size 2.

Example 2:

Input: Pending Tasks: ["Task A", "Task B", "Task C"], Batch Size: 3
Output:
Batch 1: ["Task A", "Task B", "Task C"]
Explanation: All tasks are grouped into a single batch of size 3.

Example 3: (Edge Case)

Input: Pending Tasks: ["Task X", "Task Y"], Batch Size: 5
Output:
Batch 1: ["Task X", "Task Y"]
Explanation:  Since the batch size is larger than the number of tasks, all tasks are placed in a single batch.

Constraints

• Batch Size: The batch size must be a positive integer.
• Task Input: Tasks are represented as strings.
• Performance: The batching logic should be efficient enough to handle a reasonable number of tasks (up to 100) without noticeable performance degradation. While not a strict requirement, aim for O(n) complexity where n is the number of tasks.
• UI Responsiveness: The UI should remain responsive during task input and batch size changes.

Notes

• Consider using React state to manage the list of pending tasks and the batch size.
• You can use any standard React libraries or techniques you are comfortable with.
• Focus on clear and maintainable code.
• Error handling is important for a robust application. Provide informative error messages to the user.
• Think about how to efficiently recalculate the batches when the task list or batch size changes. Avoid unnecessary re-renders.
• You don't need to implement any actual task processing; the focus is on the batching logic and UI. Just display the batches.