<Show /> vs React-style conditional rendering.
I'm trying to implement a long conditional rendeirng statement in React into Show. It ends up pretty buggy. I just copied the React conditional statement and it seems to just work no problem.
Are there any disadvantages to this?
By the way this solid port project is @wobsoriano 's port of Sonner.
I'm just fixing bugs haha
3 Replies
I was about to comment
yes to the question Are there any disadvantages to this? because I was assuming it was similar to why <For/>is necessary (Array.prototype.map would wastefully recreate all the DOM nodes on every update and remount all the components), but apparently according to https://www.solidjs.com/tutorial/flow_show the compiler is smart enough to handle ternaries and &&
The most basic control flow is the conditional. Solid's compiler is smart enough to optimally handle ternaries (a ? b : c) and boolean expressions (a && b). However, often it is more readable to use Solid's <Show> component.and a basic test https://playground.solidjs.com/anonymous/ee264c51-543c-4139-a08d-a694b0f2be55 seems to confirm this. I would personally try to do it with
<Show/> to keep the codebase more 'solid'
what is buggy about ur implementation rn? can't really tell too much from the video. can u post some code?what is buggy about ur implementation rn?Some icons aren't showing. Also yeah my fault, the video doesn't show the bug. It's the fix.
can u post some code?Check line 345: https://github.com/wobsoriano/solid-sonner/blob/main/src/index.tsx The fix I did was just to copy the original implementation in React (line 387): https://github.com/emilkowalski/sonner/blob/main/src/index.tsx Here's the actual fix in the SolidJS port (src/index.tsx line 344): https://github.com/wobsoriano/solid-sonner/pull/16/files#diff-0b5adbfe7b36e4ae2f479291e20152e33e940f7f265162d77f40f6bdb5da7405 Here's the vid for the icon bug I mentioned.
the compiler is smart enough to handle ternaries and &&N.B. only one level deep, if you go deeper with nesting you get the unwanted rerendering