No bind or arrow functions in in JSX Props - Why? How?

Tue, 25 Jul 2017 07:30:45 +0200

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

Tslint on Maarten on IT

No bind or arrow functions in in JSX Props - Why? How?

What’s it about?