Too much mental load of reactivity system in render function?

[pilaoda]

I heard solid has simpler mental model compare to react, so I decide to try it and migrate a react project to solid, but found it even more complicated. Here is example:

//React
function CardList() {
	const player = useLocalPlayer();
	const logined = player?.logined;
	if (!logined) { return null; }

	const cards = player?.cardManager?.cards ?? [];
	const playing = player?.state === EPlayerState.Playing;
	const cardPanels = [];
	for (const card of cards) {
		const cardPanel = (
			<CardPanel key={cardPanels.length} card={card}
				className={playing ? "White" : "Grey"} />
		);
		cardPanels.push(cardPanel);
	}

	return (
		<Background >
			{cardPanels}
		</Background >
	);
}

// Solid
function CardList() {
	const player = useLocalPlayerSignal();
	const logined = createMemo(() => player()?.logined);
	const cards = createMemo(() => player()?.cardManager?.cards ?? []);
	const playing = createMemo(() => player()?.state === EPlayerState.Playing);
	const cardPanels = createMemo(() => {
		return <For each={cards()}>
			{(card) => {
				return <CardPanel card={card} class={playing ? "White" : "Grey"} />
			}}
		</For>
	});

	return (
		<Show when={logined()}>
			<Background >
				{cardPanels()}
			</Background>
		</Show>
	);
}

useLocalPlayer is a complicated react hook that trigger rerender when player data change, and it should return a signal in solid I guess.
In react, I need to care about: will the render function break the hook system when it run again? Don't forget to wrap side effect in useEffect!
In solid, I need to care about: will the reactivity system be break here and where should I read and write the signal? Don't forget to wrap every variable read in createMemo!
In my experience so far, solid is just move my mental load from one trouble into another trouble. "Care about side effect" => "Care abount signal read write". Solid is even more complicate in my situation, since my old project do a lots of variables access and conditional flow control in render function.
Did I miss something? I guess react allow me to implement complicated hook and simplify my UI code, while solid just simpify my hook(or we calld signal?) function implementation but push the complexity back to UI render function or JSX composition.
Please point me out if I'm wrong. Is there any better "solid" way to push the complexity back to common hook function library?

[atk]

For idiomatic solid, you would usually use a store with a structured initial value to have fine-grained reactivity for the player. You don't need memos and you don't need to extract the cardPanels for that.

[pilaoda]

Can't imagine how to achieve your idea. Could you please provide some example code? Thanks!

[atk]

Pseudo-code:

const useLocalPlayerStore = () => {
  const [player, setPlayer] = createStore({
    logined: undefined as boolean|undefined,
    cardManager: { cards: [] },
    // ...
  });
  // ...
  return player;
};

const CardList = () => {
  const player = useLocalPlayerStore();
  return <Show when={player.logined}>
    <Background>
      <For each={() => player.cardManager.cards}>
        {(card) => <CardPanel
           card={card}
           class={player.state === EPlayerState.Playing} />}
      </For>
    </Background>
  </Show>
}