Posts tagged "TypeScript"
No bind or arrow functions in in JSX Props - Why? How?
Recently, I found myself running tslint on a small React application written in TypeScript. The combination itself is worth writing another blog post about, but today we’re covering just one of the rules that tslint has; in fact, it is defined in the “tslint-react” rule set. It is also included in the eslint-plugin-react, because it is not related to TypeScript per se.
What’s it about?
In its ES6 version, the rule says: “No .bind()
or Arrow Functions in JSX Props (react/jsx-no-bind).”
The TypeScript version has two rules, one is called “jsx-no-bind” and the other one “jsx-no-lambda”; their intent is the same as the ES6 one.
When you first notice the rule, you might wonder “why is that an issue?”.
If you call bind()
, or if you define an arrow function, this will create a brand new function every time you run that code.
When you’re using that inside a render()
method or a so-called stateless functional component, it will create a new function every time you render that component.
That violates the one strict rule from React that says