Learn TypeScript 3 by Building Web Applications

Bonus: Improving rendering performance

In the last example, we actually used a naive function binding on the following line:

<button onClick={() => this.add(1)}>+1</button> 

The issue with this line is that, by defining our handler function inline, a new function will actually get created each time the component is re-rendered. This doesn't cause much harm in the examples in this book, but applying this approach for actual applications will certainly cause performance issues.

A better approach consists of defining the function once and binding it instead:

function onClickHandler() { ... }...<button onClick={this.onClickHandler}>+1</button> 

With the preceding code, the same onClickHandler function will be reused when the component gets re-rendered. ...