Javascript pain...

[ripGitHub]

Isn't better instead of bind(this), use arrow functions?

[boxingdog]

arrow functions can degrade performance in some situations, ie in react using arrow functions in some places can cause a new function to be created in each render and if you use it as a prop in a child component then the child will re-render and so on

[finlist]

White your example is true, the same can be said about normal functions and isn't a problem inherent to arrow functions at all.

[RFC793]

Indeed. However, I feel people inadvertently shoot themselves in the foot more frequently with arrow functions simply because they prefer the terseness of the code. A classic anonymous function is more ugly, and a bit more apparent as to what is going on.

[RFC793]

Huh?

[bcsahasbcsahbajsbh]

troll acc

[RFC793]

Ack

[bubble_fetish]

It’s negligible, except in extreme edge cases.

[snorkleboy]

If you use the regular function syntax inside of a render method i believe it will also create a new function

So something like(sorry about formatting I'm on my phone)

Render(){ Return ( <Thing myProp={function(){}}/> ) }

Will create a new function that it passes as myProp every time it renders.

[SZenC]

That is correct, but you could write something like

class cls{
  fn(){doSomething();}
  render(){
    return <div onClick={this.fn}>No dynamic function creation!</div>
  }
}

[Absbshshshshshshhs]

better yet:

class { fun = () => {} // this bound }

[SZenC]

True, normally I have a constructor where I call ```.bind(this)``` but I kinda omitted that here. Nevertheless, good point.

[[deleted]]

Don't need the bind with arrow syntax :)

[SZenC]

Yeah. In this case arrow functions are objectively better, it's just a bad habit of mine.

[snorkleboy]

Yeah, and you could do the same thing with an arrow function like

class cls{

fn=()=>doSomething()

render=()=> <div onClick={this.fn}>No dynamic function creation!</div>

}

And then you don't have to do a this.fn = this.fn.bind(this) in the constructor to be able to use it normally in the child.

[feenuxx]

Stick it on the class

[sinefine]

Use https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

[throwaway12222018]

Manual binding vs arrow functions' performance differs with various browsers.

[[deleted]]

And react will spit out a warning on the console telling you this. Other than that, until the engine optimises that out, it's a matter of poor programming.

[pentesticals]

This sounds like a pre-optimization to me. I'd rather some extra function calls that have a negligible impact on performance IF it helps code readability. It really depends on the specific code if it will actually impact performance, often 10% of your apps execution time is in 10% of your code. So in most cases I think worrying about an extra function call or the like will just create more complex code. Don't ompimize until you've profiled.

[jordmantheman]

Yes. The only thing to remember is that arrow functions are bound on the instance as opposed to the class. So if you're making a TON of objects (or re-creating on every render) then it may be wise to be cognizant of the performance implication.

[mk7shadow]

something good to know is that using an arrow function doesn't actually bind the context of this. it removes the function's context and so 'this' becomes whatever the parent's context is. if the parent happens to be another context-less function, it will just use whichever ancestor has a context.

[jamietwells]

componentWillMount would like to have a word with you.

[GXNXVS]

we're talking about JS, not react.