React doesn't reload component data on route param change or query change

Question

I have a "home" component with links, and when you click a link the product component is loaded with the product. I also have another component which is always visible, showing links to the "recently visited products".

These links don't work when on a product page. The url updates when I click the link, and a render occurs, but the product component doesn't update with the new product.

See this example: Codesandbox example

Here are the routes in index.js:

<BrowserRouter>
  <div>
    <Route
      exact
      path="/"
      render={props => <Home products={this.state.products} />}
    />

    <Route path="/products/:product" render={props => <Product {...props} />} />

    <Route path="/" render={() => <ProductHistory />} />

    <Link to="/">to Home</Link>
  </div>
</BrowserRouter>;

The links in ProductHistory look like this:

<Link to={`/products/${product.product_id}`}> {product.name}</Link>

So they match the Route path="/products/:product".

When I am on a product page and try to follow a ProductHistory link, the URL updates and a render occurs, but the component data doesn't change. In the Codesandbox example you can uncomment the alert in Product components render function to see that it renders when you follow the link, but nothing happens.

I don't know what the problem is...Can you explain the problem and find a solution? That would be great!

Shubham Khatri · Accepted Answer · 2019-02-17T13:05:52.630

41

Along with componentDidMount, You also need to implement the componentWillReceiveProps or use getDerivedStateFromProps(from v16.3.0 onwards) in Products page since the same component is re-rendered with updated params and not re-mounted when you change the route params, this is because params are passed as props to the component and on props change, React components re-render and not re-mounted.

EDIT: from v16.3.0 use getDerivedStateFromProps to set/update state based on props(no need to specify it in two different lifecyle methods)

static getDerivedStateFromProps(nextProps, prevState) {
   if (nextProps.match.params.product !== prevState.currentProductId){
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
     return {

        product: result[0],
        currentId: currentProductId,
        result

      }
  }
  return null;
}

Prior v16.3.0, you would use componentWillReceiveProps

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.product !== this.props.match.params.product) {
      const currentProductId = nextProps.match.params.product
      const result = productlist.products.filter(obj => {

        return obj.id === currentProductId;

      })
      this.setState({

        product: result[0],
        currentId: currentProductId,
        result

      })
    }
  }

Working codesandbox

edited Feb 17 '19 at 13:05

answered Jan 07 '18 at 16:45

Shubham Khatri

211,155
45
305
318

1

componentWillReceiveProps is now deprecated. But how else can you do it? – Bastian Voigt Sep 12 '18 at 09:31
2

@BastianVoigt : You can use integration of new lifecycle methods in react +16.3 `getDerivedStateFromProps`, `componentDidUpdate` as described in [this answer](https://stackoverflow.com/a/48139357/2101813). – Arash Khajelou Nov 29 '18 at 12:13
I tried the `getDerivedStateFromProps` solution. But it didn't work. It seems that the `getDerivedStateFromProps` only fires once on mount. – developarvin Jan 25 '19 at 02:58
@arvinsim, Not true, getDerivedStateFromPRops is fired on initial mount as well as on every other update. Also there was a change in this API in 16.4. I will update my answer to incorporate that change – Shubham Khatri Jan 25 '19 at 05:30
This pointed me in the right direction, thanks for the great answer. – Moiz Apr 27 '19 at 05:07
But how can we make this work with functionnal components, now? – Alexis Lessard Aug 21 '20 at 20:23

Prakash S · Answer 2 · 2018-09-14T16:15:40.917

8

As Product component is already loaded it will not reload. You have to handle new product id in the below method of component

componentWillReceiveProps(nextProps) {
if(nextProps.match.params.name.product == oldProductId){
  return;
}else {
 //fetchnewProduct and set state to reload
}

With latest version of react(16.3.0 onwards)

static getDerivedStateFromProps(nextProps, prevState){
   if(nextProps.productID !== prevState.productID){
     return { productID: nextProps.productID};
  } 
  else {
     return null;
  }
}

componentDidUpdate(prevProps, prevState) {
  if(prevProps.productID !== this.state.productID){
     //fetchnewProduct and set state to reload
  }
}

edited Sep 14 '18 at 16:15

answered Jan 07 '18 at 16:44

Prakash S

544
4
10

ComponentWillReceiveProps is also deprecated and considered unsafe now... is there any other way to do it? – Bastian Voigt Sep 12 '18 at 09:32
@BastianVoigt it should be prevProps as componentDidUpdate will be called after props has changed which will be same nextProps which we had set in getDerivedStateFromProps. – Prakash S Sep 14 '18 at 16:17
Right, but I would want to reload when the current productID (this.props.productID) is different from the one in my state, don't you think? – Bastian Voigt Sep 15 '18 at 19:37
1

@BastianVoigt. Right that is what above condition does. The current productID(this.props.producID) will be having new porductID which we have had said in state variable. If we compare that then it will be always equal – Prakash S Sep 17 '18 at 03:36

score 6 · Answer 3 · answered Jun 04 '19 at 00:09

Although all the above-mentioned ways will work, I don't see a point to use getDerivedStateFromProps. Based on React docs, "if you want to re-compute some data only when a prop changes, use a memoization helper instead".

Here, instead, I would suggest simply using componentDidUpdate along with changing the Component to PureComponenet.

With reference to React docs, PureComponenets only rerender if at least one state or prop value changes. Change is determined by doing a shallow comparison of state and prop keys.

  componentDidUpdate = (prevProps) => {
    if(this.props.match.params.id !== prevProps.match.params.id ) {
      // fetch the new product based and set it to the state of the component
   };
  };

Please note that the above only work if you change the Component to PureComponent, and obviously, you need to import it from React.

In my case it's working for regular components too. – Siddharth Gharge Dec 08 '19 at 16:04 — Siddharth Gharge, Dec 08 '19 at 16:04
it also works for me without `PureComponent`, thanks! – Sean Dec 13 '19 at 12:49 — Sean, Dec 13 '19 at 12:49

score 3 · Answer 4 · answered Mar 27 '19 at 20:01

If you aren't maintaining state in your component, you can use componentDidUpdate without the need for getDerivedStateFromProps:

  componentDidUpdate(prevProps) {
    const { match: { params: { value } } } = this.props
    if (prevProps.match.params.value !== value){
      doSomething(this.props.match.params.value)
    }
  }

React doesn't reload component data on route param change or query change

4 Answers4

Linked

Related