0

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()
}
Ghonima
  • 2,978
  • 2
  • 14
  • 23
Prav
  • 63
  • 1
  • 8
  • 1
    See [How to access the correct `this` inside a callback?](https://stackoverflow.com/q/20279484/1218980) to understand the reasoning behind, in addition to TJ's answer. – Emile Bergeron Nov 13 '19 at 16:07

1 Answers1

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.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • [React discourages inheritance with components](https://reactjs.org/docs/composition-vs-inheritance.html), 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`](https://stackoverflow.com/a/52456041/1218980). – Emile Bergeron Nov 13 '19 at 16:14
  • 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](https://medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1). – T.J. Crowder Nov 13 '19 at 16:18
  • 1
    @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... – T.J. Crowder Nov 13 '19 at 16:27
  • For clarification what is the purpose of this.onGridReady.bind(this)? what is the 'bind' doing? – Prav Nov 13 '19 at 17:29
  • @Prav - [`bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) returns a new function that, when called, will call the function you called `bind` on using the argument you gave `bind` as `this` when making the call. See the link for details. Assuming that `onGridReady` is defined using method syntax and so it's on the prototype, `this.onGridReady = this.onGridReady.bind(this);` in the constructor puts a new `onGridReady` property directly on the object that, when called, will call the prototype `onGridReady` with the right `this`. – T.J. Crowder Nov 13 '19 at 17:31
  • 1
    the link definitely helped. thanks for the responses – Prav Nov 13 '19 at 17:58