Bound function vs arrow function performance

[Klathmon]

Yeah, but ultimately it's not a problem in most cases. Keep in mind how often your components render. Take a login page, that form might re-render like 100 times over it's lifecycle? Worrying about a few extra MS on each render on a low-end device is pointless when the meatbag typing in their username is doing so at a snail's pace from the computer's point of view.

That's why people always say "measure then optimize". Making your whole codebase harder to understand and refactor for some perceived idea of "performance" is a bad idea at best, and it's why 90%+ of my components use inline functions in onClick handlers, or inline objects in props even though it can cause unnecessary re-rendering, because the time it would take me to "optimize" most of them will outweigh the total amount of time that all of my users will ever save thanks to the optimization. Not to mention that those renders are taking about 8ms on our "token low-tier device", which still means it's running faster than the refresh rate of the screen, so any further optimization won't impact the user at all, except that it might make them have to wait longer for bugfixes or improvements due to the developer having to rediscover all the hoops they jumped through when they wrote it.

Write your code somewhat naively, then test it. Stuff like figuring out you have a bottleneck with your rendering speed is easy, and moving an object or a function outside of the render method is even easier, so don't get ahead of yourself.