exception was thrown: setState() or markNeedsBuild() called during build - flutter

Question

I'm little bit confusion about the this exception was thrown: setState() or markNeedsBuild() called during build. and I know it get resolved by this WidgetsBinding.instance.addPostFrameCallback((timeStamp) {}); code of line , but I want to understand why it happens, and why we use this addPostFrameCallback . I want to know deep concept about this exception with meaning , because this exception make me mad at sometimes , my code goes well suddenly it comes up. I don't know deeper but I think It is related to our state, I think our state is not build properly and the state got called again it makes a loop. that's why flutter throws this exception.
I have noticed, when I was newbie to the flutter , I put this setState() inside build method so this exception came up. where I got idea , This makes loops for states, all we know that setState() is use for rebuilding the states and call build method of widget tree , which rebuild our widgets with dynamic value.
If I have misconception about this exception , I would love to be clear by anyone.
I'm gonna attach the code below , where exception produced when goes to the screen for second time:
class UpcomingAppointmentsScreen extends StatelessWidget {
UpcomingAppointmentsScreen({Key? key}) : super(key: key);
AppointmentController controller = Get.find();
#override
Widget build(BuildContext context) {
controller.getupcomingAppointments(); //At this line exception comes up.
return Scaffold(
backgroundColor: MColors.colorBackgroundLight,
body: Stack(
children: [
Obx(() {
if (controller.upcomingAppointments.isEmpty &&
!(controller.upcomingAppoinmentLoadingState.value)) {
return Center(
child: Text(
'No upcoming appointments found',
style: TextStyle(
color: Colors.black,
fontSize: FontSize.largeTextSize,
fontWeight: FontWeight.bold),
),
);
} else {
return ListView.builder(
padding: const EdgeInsets.all(3),
itemCount: controller.upcomingAppointments.length,
itemBuilder: (context, index) {
var appointment = controller.upcomingAppointments[index];
return AppointmentCard(appointment);
});
}
}),
Obx(() {
return Visibility(
visible: controller.upcomingAppoinmentLoadingState.value,
child: Center(child: CircularProgressIndicator()));
})
],
),
);
}
}
Api call and set data to list of models :
getupcomingAppointments() {
upcomingAppoinmentLoadingState.value = true;
ApiCalls.appointmentsHistory().then((value) {
List list = value['Upcoming Appointments'];
upcomingAppointments.clear();
list.forEach((element) {
upcomingAppointments.add(AppointmentsData.fromJson(element));
});
upcomingAppoinmentLoadingState.value = false;
}).catchError((onError) {
upcomingAppoinmentLoadingState.value = false;
});
}