Accepted answer

Make this.state such that it will control how your component gets rendered.

Now, within componentWillReceiveProps, check the nextProps argument

componentWillReceiveProps(nextProps, nextState) {
  if( <check in nextProps if my route has changed> ) {
    let newState = Object.assign({}, this.state);
    // make necessary changes to the nextState Object by calling
    // functions which would change the rendering of the current page
    this.setState({ nextState });

This would make componentWillReceiveProps take action only when the route changes.

Now in your render function,

render() {
  const { necessary, variables, to, render } = this.state;
  let renderVariables = this.utilityFunctionsReqToRender(someArgs);
  return (

This would make your component "refresh" whenever the route changes.


componentWillReceiveProps is deprecated since React 16.3.0 (as says a warning in the browser console)

Reference :

So componentDidUpdate can be used to get the new state and reload data depending on params

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate ";

Related Query

More Query from same tag