Flutter Anti-Pattern: How setState() Turns Your App Into a Slideshow

Context

Flutter 앱에서 많은 개발자들이 UI에 영향을 주지 않는 변수 변경에도 setState()를 호출하고 있다. 데이터 입력 폼에서 매 글자마다 전체 위젯 트리를 재구성하거나, 제품 카드에서 단일 버튼의 색상만 변경하는데도 전체 카드를 다시 그리는 현상이 발생한다.

Technical Solution

• UI와 무관한 변수는 상태 없이 할당: 서버 전송용 _apiToken, 캐싱용 _cache 등은 setState() 없이 단순 할당
• TextField 입력값은 TextEditingController로 관리: onChanged에서 setState() 제거하고 필요시 addListener()에서 검증·디바운싱 처리
• 단일 UI 요소 상태 변경은 ValueNotifier + ValueListenableBuilder 사용: 제품 카드의 하트 아이콘과 장바구니 아이콘만 선택적으로 재구성
• 여러 관련 위젯이 영향받으면 별도 StatefulWidget으로 추출: 상태 범위를 명확히 제한
• setState()는 화면 대부분이 변경될 때만 사용: 복잡한 애니메이션·리스트 전체 재구성 시에만 의도적으로 호출

Key Takeaway

Flutter에서는 React와 달리 모든 변수 변경마다 상태를 갱신할 필요가 없다. UI 상태와 비즈니스 로직을 명확히 분리하고 필요한 부분만 재구성하는 정밀한 업데이트 전략을 적용하면 저사양 기기에서도 안정적인 프레임레이트를 유지할 수 있다.