Should we avoid arrow function inside JSX: ReactJS

Question

Is providing a setState-function as onClick-property directly a bad thing, cause the function will be defined with every render again? Should it be declared as function instead, e. g. this.open?

render() {
    return (
        <div>
            <button
                type="button"
                onClick={() => this.setState({ isOpen: !this.state.isOpen })}
            />
        </div>
    );
}

It's fine to use inline setState, though you may want to use the `prevState` syntax shown [here](https://reactjs.org/docs/react-component.html#setstate) — Ben Kolya Mansley, Jan 28 '18 at 17:36
As long as you write Arrow function in render it will be called multiple times. Check this https://stackoverflow.com/questions/45053622/how-to-avoid-binding-in-render-method/45053753#45053753 — Shubham Khatri, Jan 28 '18 at 17:47

Mayank Shukla · Accepted Answer · 2018-01-28T17:46:45.627

Cause the function will be defined with every render again?

Yes, btw it doesn't matter whether you are using block body or concise body of arrow function, each time a new function will get created. You should try to avoid arrow function inside JSX.

If you bind the method in the constructor then it will get created only once, and for each re-rendering same reference will be used.

Block Body:  () => {....}

Concise Body: () => expression

Should it be declared as function instead?

As mentioned in the Doc:

In most of the cases its fine, but we generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

Write it like this:

handleClick(){
   this.setState(prevState => ({ isOpen: !prevState.isOpen }))
}

onClick={this.handleClick}

Should we avoid arrow function inside JSX: ReactJS

1 Answers1