I saw the code there, I couldn't find anything like that, may be he rectified his code after reading your comment. Sir, would you mind telling me about this please. Just curious if I make this mistake as well.
The problem is that the binding, when done in render, only is referenced as long as the render cycle exists. Next time it renders again, all current bindings are lost and will be created again. That causes the re-render of children even when nothing has changed. Also the browser has to garbage collect the abandoned binding references from previous render cycles.
There are a lot of articles targeting this. Here is one. Other may dive down deeper into that material.
As far as i know is the core of that Problem es6 classes. That whole function binding comes from es 6 class scope behavior and does not affect functional written components. I read an article from a react team member about that. I‘ll look if I can find it, I’ll post the link.
And since you want to use reacts synthetic events you have to use es6 classes.
The solution to this is basically bind function in the constructor or via arrow function in the class. The binding then is „stable“ because it lives as long the component lives.
TLDR: in classes the functions are not Auto bound to the class which can cause „this“ to be undefined. Functional components which are pure functional auto bind it’s methods to the current context. That’s why it’s only a matter of class components.
Sebastian
Hi,
The problem is that the binding, when done in render, only is referenced as long as the render cycle exists. Next time it renders again, all current bindings are lost and will be created again. That causes the re-render of children even when nothing has changed. Also the browser has to garbage collect the abandoned binding references from previous render cycles.
There are a lot of articles targeting this. Here is one. Other may dive down deeper into that material.
medium.freecodecamp.org/why-arrow-functions-and-b…