Any tip/checklist to debug Solid components when it refuses to react the signal changed?
https://github.com/solidjs/solid/discussions/2336
Here is the repo I stuck:
https://gitlab.com/ndt-leisure/mangodex
So basically this is a Tauri 2 + Bun + Vite + SolidJs project (it meant for testing Tauri 2 and practice on SolidJs). Everything seems to work ok with simple case but soon I got myself in a situation where a solid component didn't get rendered when the signal value changed. So far I have done these things but it doesn't tell me anything much:
check console.log in tauri linux desktop app → no error found
log the signal value through createEffect → the value is printed out properly
because 1 of my signal is an object so I thought maybe I used wrong function for it. Therefore, I replace createSignal with createStore → the result is no better
it's not like the component never work. Sometime it works, but not from starting the app, it from hot reload of updating a part of my code (usually by adding console log a signal)
I'm still learn Solid so there are many things I didn't know much. Is there any debug checklist I should check for this case? Maybe if you can look at the code of mine and give me a few pieces of thought please? (all the solid frontend code is in /src/)
Thanks in advanced
GitHub
Any tip/checklist to debug Solid components when it refuses to reac...
Here is the repo I stuck: https://gitlab.com/ndt-leisure/mangodex So basically this is a Tauri 2 + Bun + Vite + SolidJs project (it meant for testing Tauri 2 and practice on SolidJs). Everything se...
6 Replies
Unlike React, Solid components don't rerender so your early return in the component will fire and the component won't be updated
Use a
Show instead to change what to display depending on a conditionThanks, but it's funny, don't you think? Why when I modify the code (such as add console.log or update text) the code run smoothly?
I don't know why I got weird behave with vite hot reload. But your suggestion totally nailed it. Thank you very much.
Just once more question, aside
<Show/> solution, do we have any other options?Yeah, there's also the:
<Switch/> <Match/> components if you have several conditions.
https://docs.solidjs.com/reference/components/switch-and-matchThanks, but I mean like no JSX solution so I can understand more about the Solid and in case I want to use solidjs without compile (like a quick dirty code for short life script)
Well because there is no virtual dom, there's not really an easy solution per say. Maybe it'd help to look at the source code of the
<Show /> component so you could get an idea of how it's properly done.
You'd most likely end up with a similar solution. You'd have all of you're logic within a createMemo so you could subscribe to changes and then just return that from your component.GitHub
solid/packages/solid/src/render/flow.ts at bb6ce8b0f1f00b0895d2c26c...
A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid
Thank you, my curiosity is satisfied.