react-native Render Best Practises Functions in JSX


For better performance it's important to avoid using of array (lambda) function in JSX.

As explained at :

A bind call or arrow function in a JSX prop will create a brand new function on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary. It may also cause unnecessary re-renders if a brand new function is passed as a prop to a component that uses reference equality check on the prop to determine if it should update.

So if have jsx code block like this:

                      onChangeValue={  value => this.handleValueChanging(value) }


                    <button onClick={ this.handleClick.bind(this) }></button>

you can make it better:

                      onChangeValue={  this.handleValueChanging }


                    <button onClick={ this.handleClick }></button>

For correct context within handleValueChanging function you can apply it in constructor of component:

            this.handleValueChanging = this.handleValueChanging.bind(this)

more in binding a function passed to a component

Or you can use solutions like this: and simply add @autobind decorator to each methos that you want bind to:

            //processing event