Difference between react functions

Question

I am not understanding why certain functions need the "= () =>" and other functions like 'onFirstDateRendered' don't have "= () =>" what's the difference between these 2 functions within a class based construct? thanks

onGridReady = (params) => {
    this.gridApi = params.api
    this.columnApi = params.columnApi
    this.gridApi.sizeColumnsToFit()
}

onFirstDataRendered(params) {
    params.api.sizeColumnsToFit()
}

See How to access the correct this inside a callback? to understand the reasoning behind, in addition to TJ's answer. — Emile Bergeron
– Emile Bergeron, Commented Nov 13, 2019 at 16:07

T.J. Crowder · Accepted Answer · 2019-11-13 16:17:56Z

5

I'm guessing these are both within a class construct. The first is a property declaration using an arrow function. The second is a method definition.

Sometimes people use the property-with-arrow-function form so that regardless of how the function is called, this during the call will be the instance of the class that the property was created on; often these are event handlers. In constrast, with method definitions, the value of this during the method call depends on the way the method is called.

edited Nov 13, 2019 at 16:17

answered Nov 13, 2019 at 16:04

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

6 Comments

Emile Bergeron Over a year ago

React discourages inheritance with components, so the prototype shouldn't be a problem. When testing a component, it shouldn't be needed to mock an event handler on the component itself. Mocking normally happens within the props, and if there's an edge case where it's needed to mock, it's still not impossible with somthing like Jest's spyOn.

T.J. Crowder Over a year ago

FWIW, there's an argument for not using property declarations with arrow functions to address ensuring this: They don't end up on the prototype, which makes various things a bit challenging (you can't mock the methods of the class when they're done that way, for instance). You can still use method syntax if you bind in the constructor (this.onGridReady = this.onGridReady.bind(this);) or use a binding decorator (if you're using decorators). More on that in this Medium article.

T.J. Crowder Over a year ago

@EmileBergeron - Yeah, and that parenthetical didn't really belong in the answer anyway. :-) Converted it to a comment. Subclassing and testing aren't the only reasons for having methods on prototypes, though. But either way...

Prav Over a year ago

For clarification what is the purpose of this.onGridReady.bind(this)? what is the 'bind' doing?

Prav Over a year ago

the link definitely helped. thanks for the responses

|

Collectives™ on Stack Overflow

Difference between react functions

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related