title: How does useLocation hook from react-router-dom work?
body: <p>I have a parent component, that renders two child components. The parent is using useLocation to read query parameters from location.search. The children have logic to add some query parameter to the url. So once a child completes its render, it adds a query parameter to the url, but the value of useLocation in the parent only has the query param from the second child. The update made by the first child seems to have been overwritten.</p>
  <pre><code>const Parent = () =&gt; {
    const location = useLocation();
  
    useEffect(() =&gt; {
      console.log(location.search)
    }, [location.search]);
    
    return (
      &lt;div&gt;
        &lt;Child1 /&gt;
        &lt;Child2 /&gt;
      &lt;/div&gt;
    )
  }
  const Child1 = () =&gt; {
    const {search} = useLocation();
    const {push} = useHistory();
    useEffect(() =&gt; {
      // modify query parameter here
      const query = queryParams.parse(search);
      query.lang = 'en';
      push({
        search: queryParams.stringify(query)
      });
    }, [])
  
    return (&lt;div&gt;Child1&lt;/div&gt;)
  }
  const Child2 = () =&gt; {
    const {search} = useLocation();
    const {push} = useHistory();
    useEffect(() =&gt; {
      // modify query parameter here
      const query = queryParams.parse(search);
      query.q = 'sample';
      push({
        search: queryParams.stringify(query)
      });
    }, [])
  
    return (&lt;div&gt;Child2&lt;/div&gt;)
  }
  </code></pre>
  <p>I expected first child to update url to <code>?lang=en</code> and second child to update it to <code>?lang=en&amp;q=sample</code>. But what happens is first child updates it to <code>?lang=en</code> and second child updates it to <code>?q=sample</code>. They are unaware of each others changes even though they are both using useLocation hook. And the parent always has only the second child's update.
  What's the mistake here? Also, is there a recommended way of doing something like this? The solution that worked for me was to use <code>window.location.search</code> in the childrens' useEffect so that when the second child is rendering, it is aware of the URL change made by the first child. This change is not detected by the useLocation hook. I would like to really understand the workings of this hook. Any help is appreciated. Thanks :)</p>