javascript - Why im getting an undefined as result with first "onSubmit" but second is ok

Question

Why when I call the "handle Search" function for the first time I get "undefined" but the second time I get my result.

    const handleSearch = (e) => {
    e.preventDefault();
    const proxy = 'https://cors-anywhere.herokuapp.com/';
    const url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?';
    const location = `location=${latitude},${longitude}`;
    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=xxxxxxxx';
    const SearchUrl = proxy + url + location + radius + type + key;
    console.log(SearchUrl);
    fetch(SearchUrl).then(response => response.json()).then(result => {
        SetList({list: result})
    })
    console.log(list);
}

EDIT: Shouldn't it be alright now? Still undefined for the first time

    const handleSearch = async (e) => {
    e.preventDefault();
    const proxy = 'https://cors-anywhere.herokuapp.com/';
    const url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?';
    const location = `location=${latitude},${longitude}`;
    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=xxxxxxx';
    const SearchUrl = proxy + url + location + radius + type + key;
    SetList({list: await myRespone(SearchUrl)})
    console.log(list);
}

function myRespone(SearchUrl) {
    console.log(SearchUrl);
    fetch(SearchUrl).then(response => response.json()).then((responseJson)=>{return responseJson});
}

Answer 1

Put console.log(list) outside handleSearch to get the latest value

const handleSearch = async (e) => {
    e.preventDefault();
    const proxy = 'https://cors-anywhere.herokuapp.com/';
    const url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?';
    const location = `location=${latitude},${longitude}`;
    const radius = '&radius=2000';
    const type = '&keyword=restaurant';
    const key = '&key=xxxxxxx';
    const SearchUrl = proxy + url + location + radius + type + key;
    SetList({list: await myRespone(SearchUrl)})
    
}
console.log(list);

The update value of useState is asynchronous, you cannot get the latest value synchronously. Only after the hooks update the value, the component re-render can get the updated value