Keep an array in state with handlers to append, insert, remove, reorder and filter items.
This is custom React hooks, you need to follow the Basic Rules when you use it.
Add items to the end of the list and remove them by index.
const useListState = <T>(initialValue?: T[]) => [
T[],
{
setState: (items: T[]) => void
append: (...items: T[]) => void
prepend: (...items: T[]) => void
insert: (index: number, ...items: T[]) => void
remove: (...indices: number[]) => void
reorder: (move: { from: number; to: number }) => void
setItem: (index: number, item: T) => void
filter: (fn: (item: T, index: number) => boolean) => void
apply: (fn: (item: T, index: number) => T) => void
},
]