diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
index a6a51b21b..ce2dd5ea3 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoDaily/EventRecurrenceInfoDaily.tsx
@@ -81,9 +81,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onStartDateChange(date: Date) {
-    this.setState({ startDate: date });
-    this.applyRecurrence();
+   private onStartDateChange(date: Date) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete. 
+    this.setState({ startDate: date }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -93,9 +95,11 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onEndDateChange(date: Date) {
-    this.setState({ endDate: date });
-    this.applyRecurrence();
+   private onEndDateChange(date: Date) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+      this.setState({ endDate: date}, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -153,23 +157,39 @@ export class EventRecurrenceInfoDaily extends React.Component<IEventRecurrenceIn
    * @param {IChoiceGroupOption} option
    * @memberof EventRecurrenceInfoDaily
    */
-  private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+   private onDataRangeOptionChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-
-    this.setState({
-      selectdateRangeOption: option.key,
-      disableNumberOcurrences: option.key == 'endAfter' ? false : true,
-      disableEndDate: option.key == 'endDate' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectdateRangeOption: option.key,
+        disableNumberOcurrences: option.key == "endAfter" ? false : true,
+        disableEndDate: option.key == "endDate" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
-  private onPatternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+  
+  private onPatternChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-    this.setState({
-      selectPatern: option.key,
-      disableNumberOfDays: option.key == 'every' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectPatern: option.key,
+        disableNumberOfDays: option.key == "every" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
   public async componentWillMount() {
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
index 0b06a0606..fafd37ad3 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoMonthly/EventRecurrenceInfoMonthly.tsx
@@ -95,9 +95,11 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onStartDateChange(date: Date) {
-    this.setState({ startDate: date });
-    this.applyRecurrence();
+   private onStartDateChange(date: Date) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ startDate: date }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -107,9 +109,12 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onEndDateChange(date: Date) {
-    this.setState({ endDate: date });
-    this.applyRecurrence();
+   private onEndDateChange(date: Date) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+      this.setState({ endDate: date}, () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
   /**
@@ -197,12 +202,16 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {string} value
    * @memberof EventRecurrenceInfoDaily
    */
-  private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) {
+   private onNumberOfOcurrencesChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    value: string
+  ) {
     ev.preventDefault();
-    this.setState({ numberOcurrences: value });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ numberOcurrences: value }, () => {
+      this.applyRecurrence();
+    });
   }
-
   /**
    *
    *
@@ -211,15 +220,22 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {IChoiceGroupOption} option
    * @memberof EventRecurrenceInfoDaily
    */
-  private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+   private onDataRangeOptionChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-
-    this.setState({
-      selectdateRangeOption: option.key,
-      disableNumberOcurrences: option.key == 'endAfter' ? false : true,
-      disableEndDate: option.key == 'endDate' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectdateRangeOption: option.key,
+        disableNumberOcurrences: option.key == "endAfter" ? false : true,
+        disableEndDate: option.key == "endDate" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
   /**
@@ -230,15 +246,22 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {IChoiceGroupOption} option
    * @memberof EventRecurrenceInfoMonthly
    */
-  private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+   private onPaternChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-    this.setState({
-      selectPatern: option.key,
-      disableDayOfMonth: option.key == 'monthly' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectPatern: option.key,
+        disableDayOfMonth: option.key == "monthly" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
-
   public async componentWillMount() {
 
     await this.load();
@@ -253,11 +276,17 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {IDropdownOption} item
    * @memberof EventRecurrenceInfoMonthly
    */
-  private  onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void {
-    this.setState({selectedWeekOrderMonth: item.key.toString()});
-    this.applyRecurrence();
+   private onWeekOrderMonthChange(
+    ev: React.FormEvent<HTMLDivElement>,
+    item: IDropdownOption
+  ): void {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ selectedWeekOrderMonth: item.key.toString() }, () => {
+      this.applyRecurrence();
+    });
   }
 
+
   /**
    *
    *
@@ -266,13 +295,14 @@ export class EventRecurrenceInfoMonthly extends React.Component<IEventRecurrence
    * @param {IDropdownOption} item
    * @memberof EventRecurrenceInfoMonthly
    */
-  private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption):void {
-    this.setState({selectedWeekDay: item.key});
-    this.applyRecurrence();
-  }
-
-  public async  componentDidUpdate(prevProps: IEventRecurrenceInfoMonthlyProps, prevState: IEventRecurrenceInfoMonthlyState) {
-
+   private onSelectedWeekDayChange(
+    ev: React.FormEvent<HTMLDivElement>,
+    item: IDropdownOption
+  ): void {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ selectedWeekDay: item.key }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
index 69b4c266d..e37d349a2 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoWeekly/EventRecurrenceInfoWeekly.tsx
@@ -96,9 +96,11 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onStartDateChange(date: Date) {
-    this.setState({ startDate: date });
-    this.applyRecurrence();
+   private onStartDateChange(date: Date) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ startDate: date }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -108,11 +110,13 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onEndDateChange(date: Date) {
-    this.setState({ endDate: date });
-    this.applyRecurrence();
+   private onEndDateChange(date: Date) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ endDate: date}, () => {
+        this.applyRecurrence();
+      }
+    );
   }
-
   /**
    *
    *
@@ -162,24 +166,39 @@ export class EventRecurrenceInfoWeekly extends React.Component<IEventRecurrenceI
    * @param {IChoiceGroupOption} option
    * @memberof EventRecurrenceInfoDaily
    */
-  private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+   private onDataRangeOptionChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-
-    this.setState({
-      selectdateRangeOption: option.key,
-      disableNumberOcurrences: option.key == 'endAfter' ? false : true,
-      disableEndDate: option.key == 'endDate' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectdateRangeOption: option.key,
+        disableNumberOcurrences: option.key == "endAfter" ? false : true,
+        disableEndDate: option.key == "endDate" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
-  private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+  private onPaternChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-    this.setState({
-      selectPatern: option.key,
-      disableNumberOfWeeks: option.key == 'every' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectPatern: option.key,
+        disableNumberOfWeeks: option.key == "every" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
   public async componentWillMount() {
diff --git a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
index e285a4f7e..8ee9c5888 100644
--- a/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
+++ b/samples/react-calendar/src/controls/EventRecurrenceInfoYearly/EventRecurrenceInfoYearly.tsx
@@ -85,29 +85,33 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
     this.spService = new spservices(this.props.context);
   }
 
-  /**
+    /**
    *
    *
    * @private
    * @param {Date} date
    * @memberof EventRecurrenceInfoDaily
    */
-  private onStartDateChange(date: Date) {
-    this.setState({ startDate: date });
-    this.applyRecurrence();
-  }
-
-  /**
-   *
-   *
-   * @private
-   * @param {Date} date
-   * @memberof EventRecurrenceInfoDaily
-   */
-  private onEndDateChange(date: Date) {
-    this.setState({ endDate: date });
-    this.applyRecurrence();
-  }
+     private onStartDateChange(date: Date) {
+      //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+      this.setState({ startDate: date }, () => {
+        this.applyRecurrence();
+      });
+    }
+  
+    /**
+     *
+     *
+     * @private
+     * @param {Date} date
+     * @memberof EventRecurrenceInfoDaily
+     */
+    private onEndDateChange(date: Date) {
+      //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+      this.setState({ endDate: date }, () => {
+        this.applyRecurrence();
+      });
+    }
 
   /**
    *
@@ -134,9 +138,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
   }
 
 
-  private onMonthChange(ev: React.SyntheticEvent<HTMLElement>, item: IDropdownOption) {
-    this.setState({ selectedMonth: item.key });
-    this.applyRecurrence();
+  private onMonthChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    item: IDropdownOption
+  ) {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ selectedMonth: item.key }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -147,10 +156,15 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
    * @param {string} value
    * @memberof EventRecurrenceInfoDaily
    */
-  private onNumberOfOcurrencesChange(ev: React.SyntheticEvent<HTMLElement>, value: string) {
+   private onNumberOfOcurrencesChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    value: string
+  ) {
     ev.preventDefault();
-    this.setState({ numberOcurrences: value });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ numberOcurrences: value }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -161,18 +175,24 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
    * @param {IChoiceGroupOption} option
    * @memberof EventRecurrenceInfoDaily
    */
-  private onDataRangeOptionChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+   private onDataRangeOptionChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-
-    this.setState({
-      selectdateRangeOption: option.key,
-      disableNumberOcurrences: option.key == 'endAfter' ? false : true,
-      disableEndDate: option.key == 'endDate' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectdateRangeOption: option.key,
+        disableNumberOcurrences: option.key == "endAfter" ? false : true,
+        disableEndDate: option.key == "endDate" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
-
   /**
    *
    *
@@ -181,13 +201,21 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
    * @param {IChoiceGroupOption} option
    * @memberof EventRecurrenceInfoYearly
    */
-  private onPaternChange(ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption): void {
+   private onPaternChange(
+    ev: React.SyntheticEvent<HTMLElement>,
+    option: IChoiceGroupOption
+  ): void {
     ev.preventDefault();
-    this.setState({
-      selectPatern: option.key,
-      disableDayOfMonth: option.key == 'yearly' ? false : true,
-    });
-    this.applyRecurrence();
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState(
+      {
+        selectPatern: option.key,
+        disableDayOfMonth: option.key == "yearly" ? false : true,
+      },
+      () => {
+        this.applyRecurrence();
+      }
+    );
   }
 
   public async componentDidMount() {
@@ -206,9 +234,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
    * @param {IDropdownOption} item
    * @memberof EventRecurrenceInfoYearly
    */
-  private onWeekOrderMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
-    this.setState({ selectedWeekOrderMonth: item.key.toString() });
-    this.applyRecurrence();
+   private onWeekOrderMonthChange(
+    ev: React.FormEvent<HTMLDivElement>,
+    item: IDropdownOption
+  ): void {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ selectedWeekOrderMonth: item.key.toString() }, () => {
+      this.applyRecurrence();
+    });
   }
 
   /**
@@ -219,10 +252,16 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
    * @param {IDropdownOption} item
    * @memberof EventRecurrenceInfoYearly
    */
-  private onYearlyByDayMonthChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
-    this.setState({ selectedYearlyByDayMonth: item.key });
-    this.applyRecurrence();
+   private onYearlyByDayMonthChange(
+    ev: React.FormEvent<HTMLDivElement>,
+    item: IDropdownOption
+  ): void {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ selectedYearlyByDayMonth: item.key }, () => {
+      this.applyRecurrence();
+    });
   }
+
   /**
    *
    *
@@ -231,9 +270,14 @@ export class EventRecurrenceInfoYearly extends React.Component<IEventRecurrenceI
    * @param {IDropdownOption} item
    * @memberof EventRecurrenceInfoYearly
    */
-  private onSelectedWeekDayChange(ev: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void {
-    this.setState({ selectedWeekDay: item.key.toString() });
-    this.applyRecurrence();
+   private onSelectedWeekDayChange(
+    ev: React.FormEvent<HTMLDivElement>,
+    item: IDropdownOption
+  ): void {
+    //Put the applyRecurrence() function in the callback of the setState() method to make sure that applyRecurrence() applied after the state change is complete.
+    this.setState({ selectedWeekDay: item.key.toString() }, () => {
+      this.applyRecurrence();
+    });
   }
 
   public async  componentDidUpdate(prevProps: IEventRecurrenceInfoYearlyProps, prevState: IEventRecurrenceInfoYearlyState) {