[TextInput] Error setting property 'text' of RCTTextField with tag #144: Native TextInput(Hdsgdh) is 4 events ahead of JS - try to make your JS faster.

[rclai]

This error happens when you type extremely fast. The more components you have alongside it, the more likely that this will happen.

<TextInput value={this.state.value} onChangeText={value => this.setState({ value })} />

And if you hit submit IMMEDIATELY after typing, the value won't be set and the input may just be blank.

In order for the value to actually be there, you have to wait just a little bit, then you can hit enter and the value will stay.

This is on iOS.

[facebook-github-bot]

Hey rclai, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[brentvatne]

setState must be expensive, can you re-create this issue with an example project that we can clone and try?

[tomauty]

I believe it's due to creating a function for every re-render of TextInput. I know this is "old" in RN time, but try putting that function outside of the render function

[rclai]

I'll have to give that a try, thanks.

[rclai]

@tomauty you were right, putting the function outside made it perform faster and I didn't get the error when I typed really fast.

[someok]

My function outside, but I still meet this warn.

<TextFieldHolder withValue={hasText}>
                    <TextInput
                        ref="textInput"
                        placeholder={this.props.placeHolder}
                        style={[styles.valueText, this.props.textInputStyle]}
                        multiline={this.props.multiline}
                        value={this.state.text}
                        onFocus={this._setFocus}
                        onBlur={this._unsetFocus}
                        onChangeText={this._setText}
                        {...this.props.textInputProps}
                    />
                </TextFieldHolder>

[kristikristo]

My function is outside too, but I still meet the warnings. When I test it on the device, is really slow when I try to move to the next TextInput. Any solution yet?

[chandlervdw]

+1 — I'm also looking for a solution to this.

[tuxtux00]

+1 - and me too

[arstiefel]

+1

[kristojorg]

+1

[rclai]

@brentvatne is this a legitimate issue that deserves a Product Pains post because of all these accumulating +1s or is it just a matter of keeping your components light-weight so that re-renders don't cause this?

[wootwoot1234]

@tomauty thanks for the tip. That helped but didn't totally fix it.

Anyone else have a good work around?

The solutions I can think of are to pass the text value in the onBlur prop or add another prop that is like onChangeText but with some sort of delay so that it doesn't fire until the user takes a break from typing (or deleting).