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.