Support for throttleProp and debounceProp

[wuct]

throttleProp

throttleProp(
  propName: string,
  wait: number 
): HigherOrderComponent

Only update a prop at most once per every wait milliseconds.

debounceProp is similar. Might be useful when a prop is updated frequently. How do you think?

[acdlite]

Throttling and debouncing are good ideas, but what do you mean by throttling a specific prop? Either the whole component updates or not, right?

[acdlite]

Oh I think I see what you mean:

• When the component receives an update, it checks which props have changed using strict equality comparison.
• If any non-throttled props have changed, those props updates are applied immediately.
• If the throttled prop has changed, it is applied using a throttled update method.

Is that right?

[wuct]

@acdlite Yes. In my mind it will be something like this

 mapPropsStream(props$ =>
  Observable.combineLatest(
    props$
      .pluck('throttledProps')
      .distinctUntilChanged()
      .throttle(900),
    props$
      .map(({ throttledProps, ...otherProps }) => otherProps)
      .distinctUntilChanged(undefined, shallowEqual),
    (throttledProps, otherProps) => ({ ...otherProps, throttledProps })
  )
)

but without Observable.

[wuct]

I can implement them if they look good

[acdlite]

Sure!

[acdlite]

@wuct Maybe implement these with middleware and submit the PR to my update-middleware branch?

[wuct]

@acdlite sure. I will find some time for it this week :)

[deepsweet]

Hey guys, just implemented these two as a part of my HOCs collection – https://github.com/deepsweet/hocs

[gastonmorixe]

With lodash

import throttle from "lodash/throttle" 

const throttleHandler = (
  propName,
  delay,
  options = {
    leading: true,
    trailing: true
  }
) => WrappedComponent =>
  class extends React.PureComponent {
    original = () => {
      this.props[propName]()
    }

    originalThrottled = throttle(this.original, delay, options)

    replace = {
      [propName]: this.originalThrottled
    }

    render() {
      return <WrappedComponent {...this.props} {...this.replace} />
    }
  }