-2

I was trying to understand how the respective function call work when we use it in React

Suppose we have two functions like this 

const something =  () => {
//something 
} 

function something1 () {
//something 
}

Till now, I have seen them being called in three different ways

like

{this.something}
this.something()
(() => something)

So my primary question is how are they different? like when being called and if there is any other way to call them (not mentioned here)?

  • 3
    `super` is a keyword and may not be used as identifier. Neither `{this.something}` nor `(() => something)` call the function, the first is again invalid syntax. – ASDFGerte Aug 03 '18 at 19:47
  • 1
    Are you new to JavaScript? Are you sure you should be jumping straight into react before learning the basics of the language? – Devin Fields Aug 03 '18 at 19:49
  • 1
    `{this.something}` passes a whatever is referenced by `this.something` using the JSX javascript code escape syntax (i.e. curly braces); `this.something()` calls the function referenced by `this.something`; `(() => something)` is an arrow function which when executed returns whatever is referenced by `something`. Maybe [this tutorial](https://www.codementor.io/jackfranklin/introduction-to-ecmascript-6-part-1-arrow-functions-classes-object-literals-ajekcu7hu) will be helpful to you. – FK82 Aug 03 '18 at 19:58
  • 1
    @ASDFGerte `{this.something}` is used in JSX for escaping code. – FK82 Aug 03 '18 at 20:00
  • Depending on what you're trying to do, this question can be related, https://stackoverflow.com/questions/45881670/should-i-write-methods-as-arrow-functions-in-angulars-class . – Estus Flask Aug 03 '18 at 20:59
  • @ASDFGerte fixed it –  Aug 04 '18 at 04:17

1 Answers1

1

this.something will not properly call a function. this.something() is the ideal way to call it because it's the most performant! () => this.something() actually triggers a re-render every time the function is called because you're creating a new function (you're literally wrapping this.something() within an empty arrow function). That being said, both are useful in different instances. When in doubt, go with this.something().

Heather Vandervecht
  • 51
  • 4