what is the different between these two functions in react?

Question

I am learning react and in some videos the lecturers use function like this in their component.

function(){}

and sometimes they use arrow function like this

function=()=>{}

what are the different between these two? whenever I use function(){} I cannot call any props from state so I always use arrow function and it works very well.

Some of below answer mentioned about this binding, which addresses your question. Just want to share one good article to you reactarmory.com/answers/when-to-use-arrow-functions — sayboras
– sayboras, Commented Dec 27, 2017 at 3:27

xDreamCoding · Accepted Answer · 2017-12-27 15:54:09Z

2

Arrow function automatically binds this-context to your component. With the normal function you would need to do that yourself in your components constructor like that:

this.func = this.func.bind(this)

edited Dec 27, 2017 at 15:54

answered Dec 27, 2017 at 3:22

xDreamCoding

1,6941 gold badge12 silver badges19 bronze badges

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

Comments

patrick · Accepted Answer · 2017-12-27 03:23:06Z

1

When using the "fat arrow" function, i.e. myFunc = () => {}, if you try to access this you will receive access to the surrounding function's this. This is because the fat arrow function does not bind it's own this.

When you use myFunc() {} you are binding this and scoping it to that function.

answered Dec 27, 2017 at 3:23

patrick

10.3k4 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

what is the different between these two functions in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related