react-native: [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.

I only experience this issue when I have remote debug live reload hot reload all turned on… If I turn them off, I no longer experience the issue.

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>

Hi all. I had the same problem, but I founded solution that works for me. The error is because we have a lot of setState in queue. So my solution is:

<TextInput
    onChangeText={text => {
        clearTimeout(this.textTimeout);
        this.textTimeout = setTimeout(()=>this.setState({phone: text}), 100);
    }}
/>

I define Timeout with 100 milliseconds delay (or you can pick any else, try to experiment with it), and on Each next call of “onChangeText” function I clear this timeout and define it again. So if you will type very quick, only your timeout will update, and after 100 milliseconds from your last type setState will update.

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

I think this needs to be reopend.

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?

I fixed the problem by doing:

1. Stop Remote JS Debugging and Disable Hot reloading
2. Close Chrome window where the debugging is running
3. Open a new Chrome window (not just new tab)
4. Start Remote JS Debugging and Enable Hot reloading

I don’t know what causes the problem, but in my case it appears when my mac resumes from sleep, with the simulator running.

+1 I agree

@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).

+1

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

I don’t think trying to make your views faster, stopping debugging, etc. are real answers. I am working on an app that uses external barcode scanners and the scanner inputs text extremely fast, of which, I doubt any amount of optimization would help fix my issue. I even have this issue in release mode with barcode scanners. Why can it not just update in a delayed manner instead of just ignoring the input?

@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?

+1

+1 - and me too

It’s definitely the live reload and remote debug in my case. I tested it with the performance monitor on a text input while typing as fast as my little piggies could handle, my RAM moved from:

150MB to roughly 162MP when off. 150MB to a whopping 193MB when live reload and remote debug where on

@JasonHenson You might want to look into debounce and throttle. It’s saved me a few times before.

@crobinson42 Thanks a million for that one.

#10559

Im also seeing this issue, ONLY when live reload and debug remotely are both on. Im currently using RN version 0.37.0 (+ redux / react-redux)

Here’s a repo to demonstrate the issue:

Bare bones ReactNative 0.33, redux, & react-redux example on a simple login form (only 1 component)

react-native-issue-808

For anyone looking for a workaround who doesn’t need to constantly read the state of the text and only needs it on submission, I think I have one. I’m not sure this is reliable yet but it seems to work and definitely gets rid of the warning and the slowness.

The workaround is to remove the onChangeText all together and read from the input’s _lastNativeText property off the ref: this.refs.input._lastNativeText.

For more details on what I did…

Here’s what my original SearchInput.js input looked like:

render() {
    var { onSubmitEditing, onChangeText } = this.props;

    // ... edited for brevity 

    return (
        <View style={containerStyles}>
            <View style={styles.inputContainer}>
                <TextInput
                    ref="input"
                    onSubmitEditing={onSubmitEditing}
                    onChangeText={onChangeText}
                />  
            </View>
        </View>
    )
}

As suggested above, I was reading from the props directly above and it didn’t work (not having an inline callback rendered every time). I also tried passing this.props.onChangeText directly to onChangeText instead of the destructuring like you’re seeing above. I still had the warnings and shit performance like everyone else though. In my SearchInput container, I tried capturing the current text value in a class instance variable instead of the state to prevent additional re-renders as our UI didn’t call for any immediate reaction to what was being typed:

class SearchInputContainer extends Component {

    constructor(props) {
        super(props);

        this.searchValue = '';
    }

    onSubmitEditing() {
        this._submit();
        this._startEditing();
    }
    _submit() {
        var { getSearchResults, searchResultsAreVisible } = this.props;
        var query = this.searchValue;

        if(!searchResultsAreVisible) {
            this._showSearchResults();
        }

        getSearchResults(query)
    }

    onChangeText(text) {
        this.searchValue = text;
    }

    render() {

        return (
            <SearchInput
                {...this.props}
                onSubmitEditing={this.onSubmitEditing.bind(this)}
                onChangeText={this.onChangeText.bind(this)}
            />
        )
    }
}

Note the this.searchValue = ''; in the constructor. Also note the onChangeText method that I was using to update it and that I was then reading that value when I fired the _submit method. I was pretty surprised that this had performance issues because I’m not re-rendering the state every time they typed. What was even odder though, was that when I first loaded my view with the search input on it, it was immediately slow before I had even started typing.

So, I removed the onChangeText handler, and tied into the onSubmitEnding callback and passed in the current value:

render() {
        var { onSubmitEditing } = this.props;

        var onSubmit = () => {
            var value = this.refs.input._lastNativeText;

            onSubmitEditing(value);
        };

        // ... edited for brevity 

        return (
            <View style={containerStyles}>
                <View style={styles.inputContainer}>
                    <TextInput
                        ref="input"
                        style={styles.input}
                        returnKeyType={returnKeyType}
                        onFocus={onFocus}
                        onBlur={onBlur}
                        onSubmitEditing={onSubmit}
                    />
                </View>
            </View>
        )
    }

Note the onSubmit method defined above and capturing the value of this.refs.input._lastNativeText and passing that into onSubmitEditing . Also note the removed onChangeText handler.

My updated container:

class SearchInputContainer extends Component {

    onSubmitEditing(query) {
        this._submit(query);
        this._startEditing();
    }

    _submit(query) {
        var { getSearchResults, searchResultsAreVisible } = this.props;

        if(!searchResultsAreVisible) {
            this._showSearchResults();
        }

        getSearchResults(query)
    }

    render() {

        return (
            <SearchInput
                {...this.props}
                onSubmitEditing={this.onSubmitEditing.bind(this)}
            />
        )
    }
}

Note how I’m passing in the query on onSubmitEnding instead of reading it from the instance variable and then passing that to submit.

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

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!