로딩창 관련 응용문제 질문 드립니다.

안녕하세요. 선생님

리액트에서 서버와 통신하려면 ajax 2 : post, fetch 강의에서 주신 로딩창 생성 응용문제에 대한 질문 드립니다.

<button onClick={()=>{
            setLoading(true); // 로딩 ui 띄우기
            axios.get('https://codingapple1.github.io/shop/data2.json')
            .then((data)=>{
              let shoesCopy = [...shoes];
              Array.prototype.push.apply(shoesCopy, data.data);
              setShoes(shoesCopy);
              setLoading(false); // 로딩 ui 숨기기

            })
            .catch(() => {
              console.log('실패하였습니다.');
              setLoading(false);
            })

저는 로딩 ui를 구현해놓고 setLoading 함수로 상태를 바꿔주려는 생각으로 이렇게 구현을 했는데,
알고보니 state변경 함수는 비동기로 마지막에 한꺼번에 처리된다고 들었습니다.

저처럼 코드를 짠다면, loading state가 계속 false로 아무 변화가 일어나지 않는다고 생각되는데
해당 문제에 대한 해답이 제공되지 않아서ㅠ 조언주시면 감사하겠습니다.!