title: How can I use state inside recompose's `withPropsOnChange` HOC?
body: <p>I want to use <a href="https://github.com/acdlite/recompose/blob/master/docs/API.md#withpropsonchange" rel="nofollow noreferrer"><code>withPropsOnChange</code></a> to create a new <a href="https://lodash.com/docs/4.17.4#debounce" rel="nofollow noreferrer">debounced</a> function based on the props that were passed in. If the props are changed, it should create a new function. <code>withPropsOnChange</code> seems perfect for this, <em>except</em> that I need access to <code>this.state</code> inside of the <code>createProps</code> callback, which recompose doesn't provide.</p>
  
  <p>What are the alternatives? i.e. how can I create a property (React or vanilla) that's contingent/depends-on on some other properties and is automatically updated when those props are updated?</p>
  
  <hr>
  
  <p>Here's the gist of what I've got now:</p>
  
  <pre class="lang-js prettyprint-override"><code>class MyClass extends React.PureComponent {
      constructor(props) {
          super(props);
          this.state = {
              isOpen: false,
              isLoading: 0,
              isWaiting: false,
              searchQuery: '',
              options: [],
              value: undefined, 
              highlightedValue: undefined,
              scrollPos: 0,
          };
          if(props.options) {
              this.loadOptions = Lo.debounce(searchQuery =&gt; {
                  this.setState(state =&gt; ({
                      isLoading: state.isLoading + 1,
                  }));
                  props.options(searchQuery).then(result =&gt; {
                      this.setState(state =&gt; ({
                          isLoading: state.isLoading - 1,
                          options: result.options,
                      }));
                  });
              }, props.delay);
          }
      }
  }
  </code></pre>
  
  <p>As you can see, I'm defining a property called <code>this.loadOptions</code> which is just a debounced copy of <code>props.options</code> with some state handling.</p>
  
  <p>This works adequately for now, but if the upstream modifies <code>props.options</code> or <code>props.delay</code>, then <code>this.loadOptions</code> <em>won't</em> be updated because I'm only doing this in the constructor.</p>
  
  <p>Now I <em>could</em> do all this again in <code>componentWillUpdate</code>, but really I only want to do it if either <code>props.options</code> or <code>props.delay</code> are updated, because those are its only two dependencies.</p>
  
  <p>I'm just looking for a cleaner design pattern to deal with this sort of thing. It's basically just "computed properties" now that I think about it (but I can't "recompute" it as needed -- I need the same instance back each time unless those properties are modified).</p>