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
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
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
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.