Should I filter an array by passing a query string (the search param) or state with history.push in react is?

Question

I am filtering and updating rendered cards from an array of cards on a product index page. Now my question is, what the benefits va downsides are for using state vs search as a param with the useHistory hook from react-router-Dom v5? On most e-commerce platforms it seems to be the case that the query string param for filters is always set, I.e …/buy/?category=seating&option=chairs, and then a state is populated whenever the search param changes.

However, isn’t it much easier and leaner to just pass state with useHistory instead? Then one wouldn’t have to worry about all the history.replace() calls to update the query Params whenever a filter is updated or selected.

Would love to hear some advice, also if I should be using query strings (the search param) at all, and what the benefit is opposed to just sending an updated state.

Essentially, with all the query string population, the code gets quite chunky(keep on calling history.replace and history.push for each filter. And I have filters for minprice, maxprice, category, brands, options, as well as sorting

Answer 1

I would say that both ways are valid ways of sorting things, though with params you get the refresh feature without using local storage, I personally just use the state way and filter, you can probably do the params way and just have a Context around the products pages, and share the list between all the pages, then filter based on the params/state. Regarding the history.push, should honestly be fine, though I recommend using the newer version of react-router.