Passing custom eventContentComponent to TimeGridScheduler via arrow function causes infinite loop on click and drag

[smcfizz]

When dragging on the grid to create a new event using a custom ContentComponent, my application is thrown into an endless loop. All other ways to interact with the grid (i.e. clicking once to create, dragging/expanding an existing event) do not cause this issue. This only occurs when I pass my custom component to the TimeGridScheduler in an arrow function so that I can pass additional props like so:

eventContentComponent={(props) => CustomEventContent(this.props.myCustomProp, props)}

If I pass my custom ContentComponent to the TimeGridScheduler as shown in the demo:

eventContentComponent={CustomEventContent}

I encounter no issues, however I am unable to pass my custom props.

[forabi]

The first code snippet is passing an inline function, which changes identity on every render. This is an anti-pattern.

You should pass a component defined outside of the scope of the function, just like any other React component. This is why the second snippet works.

For passing custom props, you may want to use React Context API or find another way.

[smcfizz]

Thanks for the quick response. React Context worked fine for me. It would be nice to have some sort of documentation/best practices guide for this component to help avoid things like this for developers like me who are not very advanced with React.