Performance issue too much reflow

[lovetingyuan]

use daisy 5.0

after remove daisy 5.0

I am not sure which class cause this problem. But the result shows there might be rendering performance issue. Too much reflows.
My be wildcard * selector could cause this.

css selector match collections (using daisy):

css selector match collections (without daisy):

[saadeghi]

Can you share a page where I can see the issue?

[saadeghi]

Thanks. Yes I would help as much as I can to find and fix the issue.

[saadeghi]

@lovetingyuan I got the new changes of your repo.
can you help me on how I can see the issue?

[lovetingyuan]

@lovetingyuan I got the new changes of your repo. can you help me on how I can see the issue?

Sorry for the missing part. I have updated the readme.md, I described the steps to reproduce.

[saadeghi]

I see, thanks for the details.
Isn't it because of React's inefficient reactivity?
React handles reactivity using virtual DOM diff.

• [as you mentioned] if you disable the reactivity of Textarea, there's no issue
• If you move the reactive Textarea to somewhere out of tab content, there's no issue
• if you move the Content out of tab-content, the issue goes away.

Here's a quick svelte version of the page https://github.com/saadeghi/test-svelte-perf where it has no issues.

If you want to use React, probably it's good to structure the data in a way that static content wont get rendered.
Maybe tools like https://million.dev/ would help.

Let me know if you have a question.

[lovetingyuan]

• Factors related to the framework:

  Other frameworks handle form elements like textarea differently from React. When React processes input in forms, it synchronizes the value of the textarea to the defaultValue. If this update to defaultValue is not performed (as in other frameworks or native behavior), there are no performance issues.

• Factors related to the tab component:

  Secondly, this issue seems to be related to .tabs-lift or .tabs-bottom and .textarea. If I use .tabs-lift or .tabs-bottom, performance issues arise. If I do not use .textarea, there are no performance issues.

• Browser differences:

  I also tested it with Firefox, and Firefox does not have this problem. However, browsers with the Chrome engine do have this issue.

Thank you very much for your help. For now, I have chosen to switch the form components to an uncontrolled mode to avoid this problem. The cause of this issue seems quite complex, and I do not plan to delve further into it. Thank you again, daisyui is a great project.