setState는 비동기 함수인가?

setState는 비동기 함수가 아니다.

✅ setState는 비동기적으로 동작한다.

 

setTimeout 같은 비동기 함수는 브라우저의 백그라운드에서 실행된 후, 이벤트 루프의 태스크 큐에 추가된다.

하지만 setState()는 브라우저의 비동기 API가 아니라, React 내부에서 비동기적으로 처리하는 방식이다.

 

setState가 비동기처럼 보이는 이유

React가 상태 업데이트를 즉시 반영하지 않기 때문!

여러 setState() 호출을 batching(일괄 처리) 하기 때문에, 즉시 실행되지 않고 비동기처럼 동작함.

 

 

setState는 이벤트 루프에서 어떻게 동작하는가?

📌 setState는 이벤트 루프를 거치지않고, React 내부 스케줄러가 처리함. 

      setState 자체는 바로 실행되지만, 상태 업데이트는 나중에 반영됨.

** 비동기 함수(setTimeout, fetch 등)는 무조건 백그라운드에서 실행되며 이벤트 루프를 거친다.  

 

왜 React는 this.state 를 동기적으로 업데이트하지 않나요?

모든 컴포넌트가 자신의 이벤트 핸들러에서 setState()를 호출할 때까지 React는 리렌더링을 하지 않고 내부적으로 “기다리고 있습니다”. 이를 통해 불필요한 렌더링을 방지하면서 성능을 향상시킵니다.

• props 와 state 사이의 일관성을 해칠 수 있으며 이것은 디버깅하기 매우 힘든 이슈를 일으킬 수 있기 때문입니다.
• 현재 작업 중인 새로운 기능들을 구현하기 힘들게 만들 수 있기 때문입니다.