Custom Array Subclassing for Domain-Specific State Updates

import React, { useState } from 'react';
 
class TaskCollection extends Array {
  static get [Symbol.species]() { return Array; }
  
  filterByPriority(minPriority) {
    return this.filter(task => task.priority >= minPriority);
  }
 
  markCompleted(id) {
    return this.map(task => task.id === id ? { ...task, done: true } : task);
  }
}
 
export function TaskListManager({ initialTasks }) {
  const [tasks, setTasks] = useState(() => new TaskCollection(...initialTasks));
 
  const handleComplete = (id) => {
    setTasks(prev => new TaskCollection(...prev.markCompleted(id)));
  };
 
  return (
    <div>
      {tasks.filterByPriority(2).map(task => (
        <button key={task.id} onClick={() => handleComplete(task.id)}>
          {task.title} ({task.done ? 'Done' : 'Pending'})
        </button>
      ))}
    </div>
  );
}