React Native Inline function understanding

Viewed 189

Below are 2 patterns of code from a simple react native class component. Is there any performance difference in those? The difference is in the way a function called on an event of native control. If there is a performance difference, I want to know how to check and verify actually there is performance difference.

Pattern 1:-

class MyClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }
    }

    onNameChange = (text) => {
        this.setState({ name: text });
    }

    render() {
        const { name } = this.state;
        return (
            <TextInput onChangeText={this.onNameChange} value={name} />
        )
    }
}

Pattern 2:-

class MyClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
        }
    }

    onNameChange = (text) => {
        this.setState({ name: text });
    }

    render() {
        const { name } = this.state;
        return (
            <TextInput onChangeText={(text) => {
                this.onNameChange(text);
            }} value={name} />
        )
    }
}

If there is a performance difference then I need to adopt to the first pattern.

2 Answers

I think that there is no performance difference since the code gets transformed or minified before it gets executed.

There is no performance difference in the two patterns that you have mentioned.

First one just passes the reference to execute. Second is just the wrapper (anonymous function) to execute your actual function.

Related