[TextField] with value via parents props latency between typings

[mstamos]

When I use TextField with value from parents props there is a latency between typing a letter and displaying it on the screen. I see this issue on my project and at official page for TextField component (I talk about the third TextField from the first colunm).

[chrismcv]

I've seen this too. I think because the state object on the parent component is changing, this is causing every field to re-render.

In house, we're wrapping field, and have a pure-render-mixin applied - however we had to suppose valueLink, and some deepness in models - which the React.addons.PureRenderMixin doesn't.

@hai-cea - is something like this too opinionated to include in the core?

(Excuse the coffeescript)

_ = require 'lodash'

module.exports =
  shouldComponentUpdate: (nextProps, nextState) ->
    for key of nextProps
      if key is 'onChange'
        continue
      if key is 'valueLink'
        return true if nextProps.valueLink.value isnt @props.valueLink.value
      else if not _.eq(nextProps?[key], this.props?[key])
        return true
      else if not _.eq(nextState?[key], this.state?[key])
        return true
    return false

[hai-cea]

@chrismcv I think we need to address shouldComponentUpdate for most if not all of our components. What about children though?

[chrismcv]

_.eq is deep - which should deal with children - i'm sure it's not mega efficient though... but at the same time has yielded a performance improvement for me

[mstamos]

Is there any way to prevent the others component to re-render when I typing into TextField? One more question this will be fixed in a new material-ui version?

[CoDEmanX]

Typing in textfields is indeed extremely slow, Firefox and Chrome. If you type really fast, it may even lock up for 2-3 seconds.

//edit: tested on demo page Text Fields.

[Kagami]

Encountered the same problem. I'm currently using onBlur, getValue and setValue as a workaround and handle the updates only after input lost the focus.

[juhaelee]

@hai-cea the pull request I just opened should fix the textfield lag in the demo page significantly. Belle had a similar issue in their docs

[shaurya947]

@mstamos @CoDEmanX @Kagami can you test again? I don't see this issue today on the docs website.. We've since implemented the PureRenderMixin so I think it has taken care of the issue

[CoDEmanX]

Seems to work very smooth now, only tested chrome but I think that fixed it. Great job!

[archie-bryann]

Encountered the same problem. I'm currently using onBlur, getValue and setValue as a workaround and handle the updates only after input lost the focus.

how can i do this, im experiencing the same issue?