State depending on other state not updating when child changes

Question

I am trying to collect data to insert in database. I am using hooks states for this matter.

I have a products state:

const [product, setProduct] = useState(
      image: '',
      tags: [],
      available_colors: colors,
      available_sizes: talles,
   })

the available_colors depends on other state which is an array of colors. This array can be pushed with new elements and they are printed in the html. But the problem is, it is not updating in the products state.

Here is the colors state

   const [colors, setColors] = useState([
      { name: 'blue' },
      { name: 'green' },
      { name: 'red' },
   ])

I am updating it like this:

const setColorsAttr = async () => {
      const value = await Swal.fire({
         title: 'Nuevo Color',
         html: `
         <input type="text" id="talle-input" class="swal2-input"/>
      `,
         showCancelButton: true,
         focusConfirm: false,
         preConfirm: () => {
            const color = Swal.getPopup().querySelector("#talle-input").value
            return color
         }
      })

      if (value.isDismissed !== true) {
         setColors([
            ...colors,
            { name: value.value }
         ])
         setProduct({
           ...product,
           [product.available_colors]: colors
         })
      }
     
   }

But in the products isn't changing. I would appreciate your help! Thanks in advance!

score 2 · Accepted Answer · answered Jan 03 '22 at 15:09

setColorsAttr forms a closure over the current colors and setColors will update colors in the next render, so you can't use the latest colors right away.

You can use useEffect with colors as a dependency:

useEffect(() => {
  setProduct(previousProduct => ({...previousProduct, available_colors: colors}))
}, [colors])

setProduct in setColorsAttr can be removed

score 1 · Answer 2 · answered Jan 03 '22 at 15:15

This happens because, setState works asynchronously, which means state doesn't update immediately.

To overcome this you need to update the product state in useEffect when color is updated.

useEffect(() => {   setProduct(previousProduct =>
({...previousProduct, available_colors: colors})) }, [colors])

To learn more about setState asynchronous working , checkout this . Why is setState in reactjs Async instead of Sync?

State depending on other state not updating when child changes

2 Answers2