UI not re-rendering on state update using React Hooks and form submission

Instead of

let updateArray = array;

Try this:

const updateArray = [...array];

https://codesandbox.io/embed/qxk4k3zmzq

Because arrays in JS are reference values, so when you try to copy it using the = it will only copy the reference to the original array.

A similar bug can happen with the same manifestation:

const [bought, setBought] = useState([])

...


bought.push(newItem)
setBought(bought)

To fix this you need to use

const newBought = [...bought, newItem] <- new reference
setBought(newBought)

Related