[BUG]: Performance issue with hundreds of CBox nodes.

[wuyongzhi]

Describe the bug
The input control's response to input is slow when there are too many components on the page.

To Reproduce
Steps to reproduce the behavior:

1. create 100 CBox on a page, and a CInput
2. bind the CInput v-model property to a var
3. input some text on CInput
4. You will see the respond is slowly

I create a repostory to show this issue, https://github.com/wuyongzhi/chakra-performance-issue-sample

[codebender828]

Hey @wuyongzhi 🖐🏾 ! Thanks for catching this. I hadn't really stress tested this before so it's nice to have someone investigate this.

After taking a look at it lags quite a lot with 100 nodes on the DOM. I have an idea that I think might be causing this. Sorry about the inconvenience.

I've done some high-level investigation around this problem and I noticed a couple of things.

The CBox component is invoking all styling inside it's render function. And because the CInput composes the CBox, it will force a re-render of the CBox as well, and these should not be called except when the component is rendered the first time.

The solution for these would be:

1. To move all styling logic inside of computed. That way it will only invoke styling once during composition.
2. Make the CBox and other low-level primitives(CPseudoBox, CFlex, CGrid, CSimpleGrid,) functional components since they do not hold any data.

At the moment I'm writing my thesis, so I won't be able to immediately devote time to this. I'll need about two weeks before I can focus on it. 🙏🏽

Once attention is drawn to this issue, and it's resolved, I'll be sure to ping you on this thread. ❤️

Contributions are welcome!

[wuyongzhi]

Thanks for your help @codebender828.

I try to add a raw html input to the page , still occurrenced.

So I'm not sure how it's caused and have tried to look at the code, but don't yet know how to go about fixing it, I'll stay tuned and thanks again for your help!

[codebender828]

Hey @wuyongzhi !

Just to share a brief update. @koca and I have been doing some investigation here, and a large portion of the performance expense has to do with how the Chakra primitives are managing their props.

Because of the props architecture with Vue, quite a lot of logic runs in between merging of consumer + default props, and passing the styles object to styled system. We have some ideas so you're welcome to join our discussion on this topic.

For quicker responses, we have a discord channel here where we'll talk about this. So contributors interested in talking about this issue so you're welcome to join us here 👇🏽:

https://discord.gg/FAUwFT

Cheers 💚

[izcream]

Same i found when bind v-model to component(ex slider/input) its will laggy😂
didnt try manual binding value and event yet😄