On datepicker I have an onChange event. The problem is when a user starts to manually change date.

if user only changes day, the onChange function is called and will send req for data.

And if user continue to make changes manually, every time onChange is executed, which causes performance issue.

How can I avoid this problem?

Sample of Datepicker code:

 <Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onChange={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     value={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

On datepicker I have an onChange event. The problem is when a user starts to manually change date.

if user only changes day, the onChange function is called and will send req for data.

And if user continue to make changes manually, every time onChange is executed, which causes performance issue.

How can I avoid this problem?

Sample of Datepicker code:

 <Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onChange={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     value={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

• javascript
• reactjs

Share Improve this question Follow edited Jan 18, 2019 at 15:17 Martijn Vissers 78211 gold badge66 silver badges3030 bronze badges asked Jan 18, 2019 at 15:07 James DelaneyJames Delaney 1,78622 gold badges2121 silver badges3838 bronze badges 1

• 1 Generally that's onChange purpose. If you don't want to track all the changes by the user you should use an onClick listener but that means that the user has to press a button or something. – Fotis Papadamis Commented Jan 18, 2019 at 15:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

I would not call it a performance issue. Since react follows one way data binding, it is up the the developer to decide when to call the render(or defer rendering). Virtual DOM should be in sync.

On the side note you could use 'onBlur' instead of 'onChange' to trigger change only when user has finished typing and focused out.

<Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onBlur={this.handleFieldChange.bind(this)}
     type="date"
     name="reportDateStarted"
     defaultValue={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

In above case the input will be 'uncontrolled' (defaultValue) since react is not aware of the change until user focus out of the input.

Probably the easiest solution would be to not use the onChange event to fetch data but only use it to control the input and have a button onClick to do the fetching.

I had a similar issue with react js.

When I change date, app does not made change. It's forzen current date.

I have solved this issue by using onFocus instead of onBlur or onClick since datepicker automatically focuses on text field which does made the change (in my case). Also, use onChange on top of onFocus if needed.

<Form.Field>
   <label style={{ float: 'left' }}>From</label>
   <input
     ref={i => {
       this.reportDateStartedField = i
       }}
     onFocus={this.handleFieldChange}
     onChange={this.handleFieldChange}
     type="date"
     name="reportDateStarted"
     defaultValue={filters.reportDateStarted}
     max={todayDate}
     style={{ fontSize: '0.9em' }}
    />

I hope it helps.