title: How to bind react-router query params with mobx global state?
body: <p>I'm creating a web client using create-react-app, mobx-react-lite and react-router-dom. How can i connect routes query params to mobx state?</p>
  
  <p>Im using hooks, so i've tried using useEffect() hook with mobx autorun() function and wrapped my components props in useAsObservableSource() hook (just as suggested here <a href="https://mobx-react.js.org/recipes-effects" rel="nofollow noreferrer">https://mobx-react.js.org/recipes-effects</a> ), and it works fine as long as i use simple params, but if it is an array, effect goes into infinite loop.</p>
  
  <pre><code>const Index = props =&gt; {
    const store = useStore(); // my mobx global state store
    const source = useAsObservableSource(props);
  
    useEffect(() =&gt; autorun(() =&gt; {
      // extracting url query params
      const params = new URLSearchParams(source.location.search);
      const tags = params.getAll('tags'); // an array ['4', '6', etc.]
      const orderBy = params.get('orderBy') || 'date'; // a string
      store.orderBy = orderBy; // works fine
      store.tags = tags; // works only first time, when open in new browser window, if query string changes, causes infinite rerenders
  
      store.fetchSomeData();
    }),
    []);
  
    return (
      &lt;Observer&gt;{() =&gt; (
        &lt;div&gt;
          // render components based on store
        &lt;/div&gt;
      )}&lt;/Observer&gt;
    );
  };
  
  </code></pre>
  
  <p>Expect effect to only run once every time query string changes, but it runs infinite amount of times on every query string change.</p>