React Dojo

Search

Search concepts, exercises and quizzes

state

useList

Manages an array with helpers to push, insert, update, remove, filter, and sort items immutably.


useList.ts
import { useState, useCallback } from "react"

interface UseListReturn<T> {
  list: T[]
  set: (list: T[]) => void
  push: (...items: T[]) => void
  insert: (index: number, item: T) => void
  update: (index: number, item: T) => void
  remove: (index: number) => void
  filter: (predicate: (item: T, index: number) => boolean) => void
  sort: (compareFn?: (a: T, b: T) => number) => void
  clear: () => void
  reset: () => void
}

export function useList<T>(initialList: T[] = []): UseListReturn<T> {
  const [list, setList] = useState<T[]>(initialList)

  const set = useCallback((newList: T[]) => setList(newList), [])

  const push = useCallback((...items: T[]) => setList((l) => [...l, ...items]), [])

  const insert = useCallback(
    (index: number, item: T) =>
      setList((l) => [...l.slice(0, index), item, ...l.slice(index)]),
    []
  )

  const update = useCallback(
    (index: number, item: T) =>
      setList((l) => l.map((el, i) => (i === index ? item : el))),
    []
  )

  const remove = useCallback(
    (index: number) => setList((l) => l.filter((_, i) => i !== index)),
    []
  )

  const filter = useCallback(
    (predicate: (item: T, index: number) => boolean) =>
      setList((l) => l.filter(predicate)),
    []
  )

  const sort = useCallback(
    (compareFn?: (a: T, b: T) => number) =>
      setList((l) => [...l].sort(compareFn)),
    []
  )

  const clear = useCallback(() => setList([]), [])

  const reset = useCallback(() => setList(initialList), [initialList])

  return { list, set, push, insert, update, remove, filter, sort, clear, reset }
}
Was this helpful?
Sign in to give feedback