React Schedule Not Updating When Datasource Updates

Question

I'm working with the ScheduleComponent in React. The Schedule component displays scheduleEvents as I would expect using eventSettings{{datasource:}} But when the parent component receives new props the parent component sees the props are new, but ScheduleComponent never updates and if I console.log the ScheduleComponent.eventSettings.datasource... the datasource is now the first datasource passed to it, not the updated values.

The change is a timestamp, but even when I change something like a string {description: 'cat'} the ScheduleComponent never updates.

Note that the parent component is a React function component, if I render the scheduleEvents manually in that components, they update just fine. Any ideas?

                    <ScheduleComponent
                        ref={t => scheduleObj = t}
                        eventSettings={{ dataSource: scheduleEvents }}
                        cellClick={(event) => onCellClick(event)}
                        editorTemplate={(event) => ApptEditorTemplate(event)}
                        popupOpen={(event) => onPopupOpen(event)}
                        actionBegin={(event) => actionBegin(event)}
                    >

Nevitha Ravi · Accepted Answer

Hi Mark, 

Thanks for your update. 

The delayUpdate delays the component rendering after the state has changed, please refer to the following link to know about delayUpdate. 
https://ej2.syncfusion.com/react/documentation/common/how-to/resolve-react-template-issues/ 

If you still face any issue kindly share the issue details or replicate the issue in a sample to help you out. 

Regards, 
Nevitha

Hareesh Balasubramanian · Answer

Hi Mark, Greetings form Syncfusion Support..! We have validated your shared query at our end and suspect that your requirement is to ‘render the events of the Scheduler using state change’ and for that same, we have prepared a sample, which can be viewed from the following link. Sample: https://stackblitz.com/edit/react-scheduler-events-rendered-using-state?file=index.js componentDidMount() { let data = extend( [], dataSource.scheduleData.concat(dataSource.timelineData), null, true ); let that = this; setTimeout(() => { that.setState({ data }); }, 2000); } render() { const { data } = this.state; return (

(this.scheduleObj = schedule)} selectedDate={new Date(2019, 0, 10)} eventSettings={{ dataSource: data }} >

); } } In the above sample, data of the scheduler is refreshed properly, can you please replicate the issue in the above sample or share code snippet that how you have changed the scheduler. We will happy to assist you..! Regards, Hareesh

Mark · Answer

Thank you for your reply Hareesh.I reproduced your code and in that example I saw it update. I also created something more like my code where the state changed in a parent component and the data was passed down via props, and again the ScheduleComponent updated.    That all makes sense.However, my ScheduleComponent in other code is not updating.  So it must be something I'm doing, although there's not much different in my code from the examples.Then I added delayUpdate to my ScheduleComponent and it updated ... it doesn't seem to matter if I add delayUpdate="true" or delayUpdate="false", either way without using delayUpdate it fails to update in my code, and with delayUpdate it does update.Ultimately in my code I'm calling an API for updates every few minutes, that returns scheduleEvents  and those events are passed as props through a hook and on through some other components down to the component holding the ScheduleComponent.  The last component that contains ScheduleComponent  sees the changes, but ScheduleComponent doesn't update without setting delayUpdate.   What does delayUpdate actually do?I'm having trouble finding it in the documentation.