hooks에서 state가 변하게 되면 리렌더링되는 부분 질문 있습니다!

강의 정말 잘 듣고 있는 수강생입니다!!!

로또 추첨기 부분을 들으며 궁금한 부분이 있어 질문 드립니다!

다음 캡처 화면에서,

winBalls의 이전 state 값을 바탕으로 하나씩 추가해 나갈 때마다

전체 코드(렌더링부터 함수 선언문까지)가 다시 실행되는 문제가 hooks에서 발생하는 것은 이해했습니다(아직 최적화를 진행하지 않은 시점입니다).

그래서 실제로 위의 getWinNumbers 함수가 불필요하게 실행이 되는 것을 콘솔을 통해 확인할 수 있었습니다.

문제는 여기서 궁금한게, state 선언문의

const [winNumbers, setWinNumbers] = useState(getWinNumbers());

가 다시 실행이 되는 데에 있는데요,

기존 처음의 winNumbers 배열을 가지고서 setTimeout을 이용해 하나 하나 6개까지 push를 하고 있는 상황인데,

push를 하면서 state 변경을 감지해 다시

const [winNumbers, setWinNumbers] = useState(getWinNumbers());

가 실행되어 버리면 셔플된 배열을 다시 winNumbers가 갖게 되는 상황이 생기게 되는 것 아닌가요?!

예를 들어, 처음 winNumbers 배열이 [1, 2, 3, 4, 5, 6 ... ] 이렇게 되어 있었다 가정하면, 

winBalls state 변수에 1을 push한 후에 (for문의 i는 0) 

변경을 감지하여 다시 

const [winNumbers, setWinNumbers] = useState(getWinNumbers());

가 실행되어  winNumbers가 [2, 1, 3, 4, 5, 6 ...] 이런 배열을 갖게 된다면

for문의 i=1에서 이전과 똑같은 1을 push하게 되어 중복이 발생하지 않을까요?

하지만 그런 문제는 일어나지 않고 있긴 합니다.

왜 그런지 이유를 잘 모르겠습니다 ㅠㅠ