Pass which properties are subscribed to into the component

[chriddyp]

Right now, if the component's properties don't update with callbacks, then it has to manage its own state. This will be a quite a bit faster as the dash-renderer re-render cycle can take a moment or two.

The standard way to check if a component should manage its own state is by checking if this.props.setProps is defined or not. For example, see the dcc.Input component:https://github.com/plotly/dash-core-components/blob/e7fcda46ec87357052f1198bf6e61ba434e46676/src/components/Input.react.js#L31-L42

In the latest dash-table project, there are many properties that can change. I would like to be able to know which properties are controlled by dash-renderer (i.e. which properties update with callbacks) and which properties should be stateful inside the table. That way, controlling the state for certain properties would remain very fast (e.g. keyboard navigation) but others would go through the entire dash-renderer lifecycle (which ends up being quite a bit slower).

Now ideally, we could solve this in dash-renderer just by making the setProps call faster. I think that this would end up being quite a bit of work. So, in the meantime, I propose passing through the set of properties that dash-renderer will manage. For example:

dashSubscribedProperties=['value']

then, the component can have logic like:

onChange={e => {
   if (props.setProps && R.contains('value', props.dashSubscribedProperties) {
        props.setProps({value: e.target.value})
   } else {
         this.setState({value: e.target.value})
   }
}}

componentWillMount(props) {
    this.state = props;
}

render (){
   <input {...R.merge(this.state, R.pluck(props.dashSubscribedProperties, props)}
}

cc @plotly/dash

[alexcjohnson]

Obsoleted by #126 I believe...