How to use a function within useState

Question

I'm using React Sortable HOC to move items around. My initial state is an empty array and I need to update the state with a function from React Sortable.

This is the original snippet from React Sortable HOC

onSortEnd = ({oldIndex, newIndex}) => {
    this.setState(({items}) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };

My state and function look like this

const [colors, setColors] = useState([])

function onSortEnd({ oldIndex, newIndex }) {
  setColors([...colors, ({ colors }) => ({
     colors: arrayMove(colors, oldIndex, newIndex)
  })]);
};

What ends up happening is no errors, but more colors get added when I attempt to arrange any existing color.

Answer 1

Based on the requirement mentioned, I think you don't need the callback format for setState and you can simply do

const [colors, setColors] = useState([])

function onSortEnd({ oldIndex, newIndex }) {
  const newColors = arrayMove(colors, oldIndex, newIndex);
  setColors(newColors);
};