Why shouldn't JSX props use arrow functions or bind?

Question

I\'m running lint with my React app, and I receive this error:

error    JSX props should not use arrow functions        react/jsx-no-bind

A

Answer 1

This is because an arrow function apparently will create a new instance of the function on each render if used in a JSX property. This might create a huge strain on the garbage collector and will also hinder the browser from optimizing any "hot paths" since functions will be thrown away instead of reused.

You can see the whole explanation and some more info at https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md