What’s real binding problem?

And answer is very simple: “With ES6 Classes, React doesn’t auto-bind the functions inside that component and you can’t use that function in render for example. However, there’re few methods how we can bind ‘this’ manually.

#1 Bind in render function

This method can cause some performance issues, as this function will be called every time component re-render and sometimes it can be so bad for our application.

#2 Use ES6 arrow function in render function

This method is pretty much the same as method #1 because it will call function every time component re-render, too.

#3 Arrow function in Class property

This method avoid perfomance issues from methods #1 and #2, but however it’s not strongly recommended to use, because it’s still experimental features which are not in offical ECMAScript specifications.


#4 Bind in constructor

This method also avoid performance issues from method #1 and #2, and because it’s not actually experimental, I will recommend to use this method as much as you can when you want to bind ‘this’.

There’re several methods how you can bind this, but as I already mentioned, I recommend to use “Bind in constructor” method before the others three. However, for some simpler components, you can use whatever method you like.