Skip to content

TextInput onChange is creating a new callback function on every render, thus making it slow #32

@TejaswitaS

Description

@TejaswitaS

In react, Ideally we should not have arrow functions declarations in onChange callbacks. Instead, we should pass a reference of an already declared function. Otherwise we will end up creating a new function each time render is called and app will be slow.
Take a look at this code on line no: 109

<TextInput {...this.props}
                ref='input'
                underlineColorAndroid="transparent"
                style={[styles.valueText]}
                defaultValue={this.props.defaultValue}
                value={this.state.text}
                maxLength={this.props.maxLength}
                onFocus={() => this.setFocus()}
                onBlur={() => this.unsetFocus()}
                onChangeText={(value) => this.setText(value)}
/>

onChange should be written like this:

onChange={this.onInputChange}

and then we declare the onChange function only once in the component

onInputChange = value => this.setState({ value });

I will raise a PR, let me know :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions