Any tip/checklist to debug Solid components when it refuses to react the signal changed?

[ngdangtu-vn]

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:

1. check console.log in tauri linux desktop app → no error found
2. log the signal value through createEffect → the value is printed out properly
3. 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
4. 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

[ngdangtu-vn]

Solutions: https://discord.com/channels/722131463138705510/1297035304829587456

REEEEE — 19/10/2024 10:30 AM
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 condition

Kooki Kodes — 19/10/2024 10:39 PM
Yeah, there's also the: components if you have several conditions.

Kooki Kodes — 20/10/2024 at 8:57 PM
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 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.

Further reference:

solid/packages/solid/src/render/flow.ts

Lines 101 to 142 in bb6ce8b

	export function Show<T>(props: {
	when: T | undefined | null | false;
	keyed?: boolean;
	fallback?: JSX.Element;
	children: JSX.Element | ((item: NonNullable<T> | Accessor<NonNullable<T>>) => JSX.Element);
	}): JSX.Element {
	const keyed = props.keyed;
	const condition = createMemo<T | undefined | null | boolean>(
	() => props.when,
	undefined,
	"_SOLID_DEV_"
	? {
	equals: (a, b) => (keyed ? a === b : !a === !b),
	name: "condition"
	}
	: { equals: (a, b) => (keyed ? a === b : !a === !b) }
	);
	return createMemo(
	() => {
	const c = condition();
	if (c) {
	const child = props.children;
	const fn = typeof child === "function" && child.length > 0;
	return fn
	? untrack(() =>
	(child as any)(
	keyed
	? (c as T)
	: () => {
	if (!untrack(condition)) throw narrowedError("Show");
	return props.when;
	}
	)
	)
	: child;
	}
	return props.fallback;
	},
	undefined,
	"_SOLID_DEV_" ? { name: "value" } : undefined
	) as unknown as JSX.Element;
	}