Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Weird double render with SolidJS when certain control components are used like <Show /> #700

Open
ryanzec opened this issue Jan 4, 2025 · 2 comments
Labels
🍎 bug solidjs Issue has a connection to the Solidjs framework.

Comments

@ryanzec
Copy link

ryanzec commented Jan 4, 2025

Describe the bug
Is seems like when control components are used inside of the overlay scrollbars component, I can get a weird double render effect when a signal updates related to the control component. In the linked example, I just used a <Show /> for simplicity but I have noticed this with <For /> too.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://stackblitz.com/edit/overlayscrollbars-solid-iavjenex?file=package.json,src%2FApp.tsx
  2. Open up the console
  3. ERROR: You will see 2 render console logs but should only have one (the initial render should have the signal as false to not render the content)
  4. Comment out the scrollbars component
  5. Reload the preview
  6. You will see 1 render console log as expected

You also only get one render log if you comment out the <Show /> but I should be able to use the <Show /> inside the scrollbars without double renders.

Expected behavior
Things in the scrollbars component not not re-render unnecessarily.

Examples
https://stackblitz.com/edit/overlayscrollbars-solid-iavjenex?file=package.json,src%2FApp.tsx

Environment

  • OverlayScrollbars version: Latest
  • Used Operating System(s): Mac OS X 12
  • Used Browser(s) (with version): Chrome (Latest)
  • SolidJS: 1.9.3 (Latest)

Additional context
Not sure if I am doing something wrong with SolidJS here but I think the SolidJS code is good.

@ryanzec
Copy link
Author

ryanzec commented Jan 5, 2025

@KingSora So it seems like a work around to this issue is either making sure the first element that is wrapped by overlay scrollbars does not use a signal or pull the content into a variable. Lucky just pulling it into a variable work in my use case as shown here:
https://stackblitz.com/edit/overlayscrollbars-solid-tj2sz1vz?file=src%2FApp.tsx

However it seems like something that could be fixed in the library itself. The SolidJS discord help me with this here with a possible direction to solve this in the library itself I think here: https://discordapp.com/channels/722131463138705510/722131463889223772/1325350338508882052

@KingSora
Copy link
Owner

KingSora commented Jan 5, 2025

@ryanzec Thanks for the report, I've published overlayscrollbars-solid v0.5.6 where I've implemented the suggested fix! :)

Here is your reproduction example with the new version: https://stackblitz.com/edit/overlayscrollbars-solid-zgdpc4yi?file=package.json,src%2FApp.tsx

@KingSora KingSora added 🍎 bug solidjs Issue has a connection to the Solidjs framework. labels Jan 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🍎 bug solidjs Issue has a connection to the Solidjs framework.
Projects
None yet
Development

No branches or pull requests

2 participants