React setstate not updating object array

Question

I am trying to update an object array but even though the correct values are passed to the function, the array remains blank. If I try add a second object, then somehow the first one gets added and I'm not sure what I'm doing wrong.

 const [qualifications, setQualifications] = useState([{}]);

  function handleAddQualification(values: any) {
    console.log(values);

    console.log(qualifications);

    setQualifications((prev) => {
      return [...prev, values];
    });

    console.log(qualifications);
  }

The values that I'm passing get logged correctly and the 2 subsequent logs of qualifications both show an empty array of objects.

I simplified the object so in my screen shot I added 'one' and the value logs correctly, but the qualifications array remains blank. If I add a second entry of 'two' then for some reason it adds 'one' to the array.

Please share some insight as to what is going on here?

Answer 1

Here is example how event loop works :)

In your case:

1. Calling handleAddQualification
2. Log values , qualifications
3. Adding setQualifications to queue as async operation
4. Log qualifications again with the same result as from step 3
5. Here can works tasks from queue which was added before setQualifications
6. setQualifications updates qualifications

Take a look here for better understanding https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Answer 2

The state update calls are asynchronous and you can't see them by logging just after update call.

1. The first object is empty because you have defined it in your default state and you update your new state using the previous state because of this the empty object always stays as first element in the array. To fix this set your qualifications to

interface Qual {
  subject?: string;
  level?: string;
  other?: string
}

const [qualifications, setQualifications] = useState<Qual[]>([]);

2. if you want to log state whenever it updates use an effect hook, something like this

useEffect(() => { 
    console.log({qualifications});
}, [qualifications])