Setting State and performing new Searches in React
<p>I've got this React app, its being compiled by babel and bundled by webpack.</p>

<p>in a timetable page <code>TimetableManagePage.js</code> I have this snippet:</p>

<pre><code>nextWeek() {
    this.setState({
        today: this.state.today.clone().add(1, 'w')
    });

    this.searchSessions();
}

previousWeek() {
    this.setState({
        today: this.state.today.clone().subtract(1, 'w')
    });

    this.searchSessions();
}

searchSessions() {
    this.props.actions.searchSessions({
            query: {
                range: {
                    when: {
                        gte: this.state.today.clone().startOf('week').toISOString(),
                        lte: this.state.today.clone().endOf('week').toISOString()
                    }
                }
            }
        })
        .then(() =&gt; this.setState({loading: false}))
        .catch(() =&gt; this.setState({loading: false}));
}
</code></pre>

<p>The idea is, if someone clicks the arrows on this:
<a href="https://i.stack.imgur.com/SZkQq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SZkQq.png" alt="screenshot"></a></p>

<p>It will move to the next or previous week.</p>

<p>The <code>searchSessions</code> runs off the state of <code>today</code>, which the <code>previousWeek</code> and <code>nextWeek</code> update. However, I'm finding that the state isn't updated when the search is ran.</p>

<p><code>this.props.actions.searchSessions</code> update a redux store state, so will set new props on the component...</p>

<p>Now, I thought that maybe this search actually belongs in the <code>render</code> function, all state should be changed by then... however, any state change in the component will cause the <code>render</code> to be re-run, which means there could be loads of calls to the search, more than there should be.</p>

<p>What is the best way to perform the new search when only the today state is updated? Should I be looking at <a href="https://facebook.github.io/react/docs/react-component.html#componentwillupdate" rel="nofollow noreferrer"><code>componentWillUpdate</code></a></p>