코드 실행 순서에 따른 btnClickCnt state 초기값 설정 관련

메인 페이지에서 '더보기' 버튼 1회, 2회, 3회 클릭 시에 관한 숙제 질문드립니다.

중첩 삼항 연산자를 사용해서 다음과 같이 작성했는데요.
let [btnClickCnt, setBtnClickCnt] = useState(0);

<button onClick={() => {
    setBtnClickCnt(btnClickCnt + 1);
    console.log(btnClickCnt);

    btnClickCnt == 1 ?
    axios.get('https://codingapple1.github.io/shop/data2.json')
    .then((result) => {
        let newShoesList = [...props.shoesList];
        newShoesList = newShoesList.concat(result.data);
        props.setShoesList(newShoesList);
    })
    .catch(() => {
        console.log('AJAX 요청 실패');
    }) :

    btnClickCnt == 2 ? 
    axios.get('https://codingapple1.github.io/shop/data3.json')
    .then((result) => {
        let newShoesList = [...props.shoesList];
        newShoesList = newShoesList.concat(result.data);
        props.setShoesList(newShoesList);
    })
    .catch(() => {
        console.log('AJAX 요청 실패');
    }) :
    alert("더 이상 상품이 존재하지 않습니다.");
}}>더보기</button>

setBtnClickCnt(btnClickCnt + 1);
console.log(btnClickCnt);에서 console.log() 실행 -> setBtnClickCnt() 실행 순으로 되잖아요. 그래서인지 버튼을 1회 클릭하면 콘솔창에 0이 출력되고, 더이상 상품이 존재하지 않는다는 문구가 뜹니다. 이러한 실행 순서 때문에 초기에 버튼 클릭한 횟수(state)를 0이 아닌 1로 저장해야 할까요? 1로 저장하기에는 뭔가 이상한 듯해서 질문드립니다.. 
console.log() 실행 -> setBtnClickCnt()이라는 실행 순서는 항상 보장된 것인가요?

• 이 게시글은 hjlee에 의해 7 월, 3 주 전에 수정됐습니다.