Odtnhj

I notice that when I update filter, it also update url and vice versa

For example, youtube: https://www.youtube.com/

When I search 'stackoverflow' the url changes to:
https://www.youtube.com/results?search_query=stack+overflow

And when I filter HD video, the url changes to:
https://www.youtube.com/results?sp=EgQQASAB&search_query=stack+overflow

See that ?sp=EgQQASAB, why do they try to encode this part, at least it is not human readable?

When I click back button. It goes to
https://www.youtube.com/results?search_query=stack+overflow
https://www.youtube.com/

How to append this to url: ?search_query=stack+overflow (why not encode this part too)

I have seen this on many websites and I know that this is best practice. So my question is:

• What exactly the name of this best practice/technique? I hardly find any articles or tutorials?




• why do we need to do this




• Are there any good articles that I can learn? I have searched these articles but it always get me to some backend articles (like best way to handle url backend) and this one is frontend




• Do you have any diagram to visualize this best practice? (forexample:
  When we fetch data, first capture query from url and append it to the request to send to server. When we update filter, first update url and then capture query from url and send request to server? How about when we click back button? I notice that when we click back it update the data, url and also the state of filter component like search bar.... I don't know, just ask about the flow of this). So we have to manage data, url and state of component at the same time, we try to somehow sync this?




• How can I apply this using React (any good demo on github and articles)