Re-request on state change react - reactjs

Question

Im trying to make my component make a new request when state changes in react. I believe that i understand the lifecycle methods, but i cannot manage to make my component make a new request when the date state changes.
I have used componentWillUpdate with prevState, where prevState returns the updated state instead of the previous date.
Anything that can help me in the right direction is appriciated.
this.state = {
date: moment(),
bookings: []
}
componentWillUpdate(prevProps, prevState) {
// prevState returns updated state
}
componentWillMount() {
const { course } = this.props.match.params;
const payload = {
startDate: this.state.date.format('MM-DD-YYYY'),
endDate: this.state.date.add(1, 'd').format('MM-DD-YYYY')
}
axios.get(`/api/booking/find/${course}? startDate=${payload.startDate}&endDate=${payload.endDate}`).then(response => {
this.setState({
bookings: response.data
})
});
}
onNext = () => {
this.setState({
date: this.state.date.add(1, 'd')
})
}
onPrev = () => {
this.setState({
date: this.state.date.subtract(1, 'd')
})
}

Answer 1

According to React doc, UNSAFE_componentWillUpdate will soon be deprecated.
Btw, this function signature is UNSAFE_componentWillUpdate(nextProps, nextState), this is why you get the updated state.
You should consider extracting your axios get request inside a function, that could be called inside a componentDidUpdate lifecycle method :
this.state = {
date: moment(),
bookings: []
}
componentDidUpdate(prevProps, prevState) {
if (this.state.date.valueOf() !== prevState.date.valueOf()) {
this.getBookings();
}
}
componentWillMount() {
this.getBookings();
}
getBookings = () => {
const { course } = this.props.match.params;
const payload = {
startDate: this.state.date.format('MM-DD-YYYY'),
endDate: this.state.date.add(1, 'd').format('MM-DD-YYYY')
}
axios.get(`/api/booking/find/${course}? startDate=${payload.startDate}&endDate=${payload.endDate}`).then(response => {
this.setState({
bookings: response.data
})
});
}
onNext = () => {
this.setState({
date: this.state.date.add(1, 'd')
})
}
onPrev = () => {
this.setState({
date: this.state.date.subtract(1, 'd')
})
}

Answer 2

It sounds like you want componentDidUpdate
componentDidUpdate(prevProps, prevState) {
if (!this.state.date.isSame(prevState.date)) {
// do request
}
}