How trigger function when specific state changed - reactjs

Question

I'm looking for a way to associate a function with a change in a particular state.
I've written this code
export type MoviesAppState = {
search: string;
searchBy:string;
startDate: number;
endDate: number;
}
export class App extends React.PureComponent<{}, MoviesAppState> {
startDate = (new Date("2018-11-13")).getTime();
endDate = new Date().getTime()
state: MoviesAppState = {
search: '',
searchBy:"Select one",
startDate: this.startDate,
endDate: this.endDate,
}
onSearch = async (val: string, newPage?: number) => {
clearTimeout(this.searchDebounce);
this.searchDebounce = setTimeout(async () => {
let newMovies = await api.getMovies(val, this.state.searchBy, this.state.startDate, this.state.endDate);
this.setState({
movies: newMovies,
search: val
});
}, 300);
}
startDateChanged = (date: Date) => {
const startDateTimestamp = new Date(date).getTime()
this.setState({
startDate: startDateTimestamp,
});
}
endDateChanged = async (date: Date) => {
const endDateTimestamp = new Date(date).getTime()
this.setState({
endDate: endDateTimestamp,
});
}
onSearchBy = (searchByCriterion:string)=>{
this.setState({
searchBy: searchByCriterion
});
}
render() {
return (<main>
<h1>Movies</h1>
<div>
<header>
<input type="search" placeholder="Search..." onChange={(e) => this.onSearch(e.target.value)} />
</header>
<SearchByCriterion
searchByHandler={this.onSearchBy}
initialCriterion={this.state.searchBy}
/>
</div>
<div>
<span>Start date: </span><MyDatePicker initialDate={this.startDate} dateChangeHandler={this.startDateChanged} ></MyDatePicker>
</div>
</main>)
}
}
export default App;
Basically what I want is that onSearch method will fire when one of the things happens- startDateChanged or endDateChanged and not only when the search input changed
I thought about calling it within the methods and I get what I want but I feel it's not the best practice.

Answer 1

componentDidUpdate is what you are after: https://reactjs.org/docs/react-component.html#componentdidupdate
componentDidUpdate(_, prevState) {
const {startDate, endDate, searchBy} = this.state
if(startDate !== prevState.startDate || endDate !== prevState.endDate || searchBy !== prevState.searchBy){
// trigger onSearch
}
}

Answer 2

You can achieve this with a componentDidUpdate lifecycle hook, which runs whenever there's a props or state change and allows you to compare the change before taking an action. See docs
It should look something like this
componentDidUpdate(_prevProps, prevState) {
// Typical usage (don't forget to compare props):
if (this.state.startDate !== prevState.startDate ||
this.state.startDate !== prevState.startDate) {
this.search();
}
}