Array Destructuring with React setState hooks

Question

I have run into this weird behavior which I don't know how to figure out. It involves array destructuring. I know that react renders changes on state only when a new object is passed into the setLocations function, even though it doesn't render the state it still changes the data on the state which you can see by refreshing, but here, I have made an entirely new array newLocation and have populated it with new data but it does not store the data to locations at all while destructuring the array inside setLocations works.

I do not understand what makes this happen. Can someone please provide me with a response. Thank you and the code example is below.

const searchGeoLocation = async (event) => {
    event.preventDefault();
    const fetchedData = await fetch(url);
    const data = await fetchedData.json();
    const newLocation = [];

    // This works without the for each
    // newLocation.push(...data); 
    // setLocations(newLocation);

    data.forEach(element => {
      newLocation.push(element)
    });

    // Has the right array
    console.log(newLocation);

    // does not work and prints an empty array
    setLocations(newLocation);
    console.log(locations);

    // Does Work
    setLocations(...newLocation);
    console.log(locations);
  }

Answer 1

I understand why this behavior happens with the comments I got, and I am going to answer my question myself just so that people who stumble upon the same issue in the future can understand as well.

It seems changes on the state are only reflected when a re-render happens. The console.log I put in the function shows the state before the re-render takes place, so when I put the console.log function in the body, the changes are being reflected in the state.