Managing Dynamic Lists with useList Custom Hook

function useList(initialList = []) {
  const [list, setList] = React.useState(initialList);

  const add = React.useCallback((item) => {
    setList((prevList) => [...prevList, item]);
  }, []);

  const remove = React.useCallback((index) => {
    setList((prevList) => prevList.filter((_, i) => i !== index));
  }, []);

  const update = React.useCallback((index, newItem) => {
    setList((prevList) =>
      prevList.map((item, i) => (i === index ? newItem : item))
    );
  }, []);

  const clear = React.useCallback(() => {
    setList([]);
  }, []);

  const reset = React.useCallback(() => {
    setList(initialList);
  }, [initialList]);

  return {
    list,
    setList, // Allow direct state manipulation if needed
    add,
    remove,
    update,
    clear,
    reset,
  };
}

// Example usage:
function TodoList() {
  const todos = useList(['Buy groceries', 'Walk the dog']);
  const [newItem, setNewItem] = React.useState('');

  const handleAddTodo = () => {
    if (newItem.trim()) {
      todos.add(newItem);
      setNewItem('');
    }
  };

  return (
    React.createElement("div", null,
      React.createElement("h2", null, "My Todos"),
      React.createElement("ul", null,
        todos.list.map((todo, index) => (
          React.createElement("li", { key: index },
            todo,
            React.createElement("button", { onClick: () => todos.remove(index) }, "x"),
            React.createElement("button", { onClick: () => todos.update(index, 'Updated: ' + todo) }, "Edit")
          )
        ))
      ),
      React.createElement("input", {
        type: "text",
        value: newItem,
        onChange: (e) => setNewItem(e.target.value),
        placeholder: "Add new todo"
      }),
      React.createElement("button", { onClick: handleAddTodo }, "Add Todo"),
      React.createElement("button", { onClick: todos.clear }, "Clear All"),
      React.createElement("button", { onClick: todos.reset }, "Reset Todos")
    )
  );
}