infernojs / inferno

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces
https://infernojs.org
MIT License
16.1k stars 635 forks source link

Optimization for class components with exactly one state #1629

Closed farooqkz closed 1 year ago

farooqkz commented 1 year ago

There are some class components which have just one entry in their state like this one. I wonder if any optimization can be made for such these components.

Havunen commented 1 year ago

Im not sure if there is anything we can optimize about that in inferno side. Having 1 or more state properties shouldnt have any noticeable impact. However if you are seeing performance issues in that component you could improve the performance by moving function creations out from the render method ( fat-arrow functions ). Generally you want to keep the render method fast. You can do that by creating class method and binding the component instance to that method. This way you create only one function per component lifecycle rather than creating new function per render call.

farooqkz commented 1 year ago

Im not sure if there is anything we can optimize about that in inferno side. Having 1 or more state properties shouldnt have any noticeable impact. However if you are seeing performance issues in that component you could improve the performance by moving function creations out from the render method ( fat-arrow functions ). Generally you want to keep the render method fast. You can do that by creating class method and binding the component instance to that method. This way you create only one function per component lifecycle rather than creating new function per render call.

I think you got me wrong. There is no problem at the moment but I wonder if it is possible to make Inferno even faster(overoptimizing?). There are class components which have got exactly one entry in their state:

this.state = {
  cursor: 0,
};

So I wonder if it's possible to make some special optimization just for such these components. I know that if we require no state, we can use Functional components which are faster than class components. But there are class components which require just one entry in their state like the one mentioned in the first post. Perhaps it's possible to make them faster than Class components with more state entries? What if I use this.state = 0? will it be faster?

Havunen commented 1 year ago

Well inferno loops over the state object only when there is a state change pending and that is typically one component per the whole tree render, so it would not yield much improvement to the performance assuming there are no thousands properties in the state. Its probably so small improvement that its impossible to reliably even measure.

And in the case of having just one property it would elimate for ... in loop of one key.

farooqkz commented 1 year ago

Ah got it. Thanks for the explaination