title: Adding debounce to mobx function
body: <p>I am creating a React App that makes search request to server as the user types. I want to debounce this search request, but not sure how to implement it in my existing code:</p>
  
  <p>Mobx Store:</p>
  
  <pre><code>// function which initiates a fetch request to server
  @action searchPlanet = async (event) =&gt; {
              this.searchString = event.target.value;
              this.planets = await getPlanets(this.searchString);
          }
  </code></pre>
  
  <p>React Component calling <code>searchPlanet</code>:</p>
  
  <pre><code>const Search = observer(({ store }) =&gt; {
      const planetList = toJS(store.planets);
      return (
          &lt;div&gt;
              &lt;div className={style.search_container}&gt;
                  &lt;input type="text" id="search" onChange={e =&gt; store.searchPlanet(e)} value={store.searchString} placeholder="search planet" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  })
  </code></pre>
  
  <p>I can't use debounce function directly on <code>onChange</code> because that will also delay the re-rendering of Search component, so the user will see the typed text after some time. But I am not able to figure out to how to implement debounce function in my store? I can do something like:</p>
  
  <pre><code>import _ from lodash
  
  @action searchPlanet = async (event) =&gt; {
              this.searchString = event.target.value;
              this.planets = await getPlanets(this.searchString);
          }
  
  debounceSearch = _.debounce(this.searchPlanet, 250);
  </code></pre>
  
  <p>The issue with this is that I can't call <code>debounceSearch</code> directly from <code>Search</code> component because of reason mentioned above. But I want to debounce <code>getPlanets</code> function, which returns a promise (I am not sure if Lodash debounce function can return the promise returned by the wrapped function)?</p>