CODEWITHSUNDEEP
reactjsreact-router
Jitender
Jitender

Reputation: 7969

After changing the query params in URL the page is remounting again

I have some filters on the page and after been applied I want to store those filter values in URL with query params. But whenever I change the param it remounts the page again and causes componentDidMount to call again. I wanted to be notified by getDerivedStateFromProps:static whenever props change.

This function I use to update my query params. Sample URL https://qa.portal.tech/feeds?country=USA&page=1&pageSize=10&price=yes

export const updateQueryString = (history: History, queryParams: any) => {
  const {
    replace,
    location: { pathname }
  } = history;

  replace({
    pathname,
    search: queryString.stringify({
      ...queryParams
    })
  });
};

Upvotes: 1

Views: 436

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281912

With the latest version of react-router-dom from v5, the behaviour has changed. Even on param or query update the component is remounted instead of rerendered when you change the url directly.

However using link actually follows the re-render pattern

Here is working demo demonstrating the change

Upvotes: 1

Related Questions