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 — Ben Kolya Mansley
– Ben Kolya Mansley, Commented Jan 28, 2018 at 17:36
As long as you write Arrow function in render it will be called multiple times. Check this stackoverflow.com/questions/45053622/… — Shubham Khatri
– Shubham Khatri, Commented Jan 28, 2018 at 17:47

Mayank Shukla · Accepted Answer · 2018-01-28 17:46:45Z

2

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}

edited Jan 28, 2018 at 17:46

answered Jan 28, 2018 at 17:39

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Should we avoid arrow function inside JSX: ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related