How to trap input change events but not every keystroke? - reactjs

Question

I have a simple component consisting of an input (jobId) and a span (jobDescription). When the user enters a jobId, the component makes an ajax call to fill in the description. Sounds easy. But here is my problem, the way I wrote it, the component makes a bunch of wasteful calls to lookup the jobDescription with each keypress.
I tried changing the lookup to onBlur instead of onChange, but then I miss the "initial load" (the initial render when the jobId is passed in from the parent). So jobDescription is blank when the form is first opened.
So here is what I need:
When the user types in a jobId, lookup the corresponding jobDescription. But not necessarily on every key stroke.
When the parent passes in a jobId, it should also lookup the corresponding jobDescription.
Here is the component as it is now:
import React from "react";
type Props = {
jobId:string,
onChange:(jobId: string)=>void
}
type State = {
description:string
}
export default class JobComponent extends React.Component {
props: Props;
state: State;
constructor(props: Props) {
super(props);
this.state = {
description: ""
}
}
componentWillReceiveProps(nextProps: Props) {
if (nextProps.jobId != this.props.jobId) {
this.loadDescription(nextProps.jobId)
.then((description)=> {
this.setState({description});
});
}
}
onChangeInternal = (event)=> {
const jobId = event.target.value;
this.props.onChange(jobId);
this.loadDescription(jobId)
.then((description)=> {
this.setState({description});
});
};
render() {
return <div>
<input className="job-id" value={this.props.jobId} onChange={this.onChangeInternal}/>
<span className="job-description">{this.state.description}</span>
</div>;
}
loadDescription = (jobId): Promise<string> => {
return new Promise((resolve) => {
if (!jobId) resolve("");
else
fetch('/components/job-picker/jobService.jsp?jobId=' + jobId)
.then((response) => {
return response.json();
})
.then((job) => {
resolve(job.description);
});
});
};
}
And here is a sample for the parent component:
import React from "react";
import JobComponent from "./JobComponent";
export default class FormTest extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Dave",
jobId: "360107",
age: 50
}
}
render() {
const onNameChange = (event)=> {
this.setState({name: event.target.value});
};
const onAgeChange = (event)=> {
this.setState({age: event.target.value});
};
const onJobIdChange = (jobId)=> {
this.setState({jobId});
};
return (
<div>
Name<input value={this.state.name} onChange={onNameChange}/><br/>
JobId<JobComponent jobId={this.state.jobId} onChange={onJobIdChange}/><br/>
Age<input value={this.state.age} onChange={onAgeChange}/><br/>
</div>
);
}
}
So, assuming who understand what I'm trying to do, how would you write this component in React?

Answer 1

You should wait for a particular time before making a request. This is primarily delaying the request and wait for user input. Change your onChange handler to something like this
onChangeInternal = (event)=> {
const jobId = event.target.value;
this.props.onChange(jobId);
clearTimeout(this.timeoutId); // resets the timeout on new input
this.timeoutId = setTimeout(() => {
this.loadDescription(jobId)
.then((description)=> {
this.setState({description});
});
}, 500); //delays request by 500ms.
};
You should also check Lodash's Debounce. This will delay the function call for a given time.
Hope this helps!