Child Component not Re-rendering

So I have this code

import { createEffect, createSignal, onCleanup, Show } from "solid-js";
import { invoke } from "@tauri-apps/api/core";
import Weapon from "./weapon/Weapon";

function Weapons() {
    const [playerInventory, setPlayerInventory] = createSignal<any>(null);

    let intervalId: any;

    createEffect(async () => {
        intervalId = setInterval(async () => {
            const response: any = await invoke("send", { message: "get_player_inventory" });
            setPlayerInventory(response.player_inventory);
        }, 500);
    });

    onCleanup(() => clearInterval(intervalId));

    const handleWeaponChange = async (weapon: any) => {
        setPlayerInventory({ ...playerInventory(), weapon: weapon });
        await invoke("send", { message: { set_player_inventory: playerInventory() } });
    }

    return (
        <Show when={playerInventory() != null}>
            <main id="weapons-container">
                <Weapon weapon_={playerInventory().weapon} on_change={handleWeaponChange}></Weapon>
            </main>
        </Show>
    );
}

export default Weapons;

import { createEffect, createSignal, onCleanup, Show } from "solid-js";
import { invoke } from "@tauri-apps/api/core";
import Weapon from "./weapon/Weapon";

function Weapons() {
    const [playerInventory, setPlayerInventory] = createSignal<any>(null);

    let intervalId: any;

    createEffect(async () => {
        intervalId = setInterval(async () => {
            const response: any = await invoke("send", { message: "get_player_inventory" });
            setPlayerInventory(response.player_inventory);
        }, 500);
    });

    onCleanup(() => clearInterval(intervalId));

    const handleWeaponChange = async (weapon: any) => {
        setPlayerInventory({ ...playerInventory(), weapon: weapon });
        await invoke("send", { message: { set_player_inventory: playerInventory() } });
    }

    return (
        <Show when={playerInventory() != null}>
            <main id="weapons-container">
                <Weapon weapon_={playerInventory().weapon} on_change={handleWeaponChange}></Weapon>
            </main>
        </Show>
    );
}

export default Weapons;

When player inventory is set via the interval (note that it's state does change) the weapon component doesn't re-render. I've tried a lot of things and can't get it to.

6 Replies

peerreynders•3w ago

1. Why is the setInterval in a createEffect? See https://www.solidjs.com/tutorial/introduction_signals?solved 2. Weapon doesn't "re-render" as such anyway. The change would propagate via the reactive props. So what might be happening is that reactivity is broken inside of the nested component (perhaps due to props destructuring) so that it would only show the initial prop value but not the updates.

SolidJS

Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.

peprOP•3w ago

1. to create the interval as soon as the page is loaded also i think you're right regarding the 2nd point

peerreynders•3w ago

This isn't React

peprOP•3w ago

does it not need to be inside the createeffect?

peerreynders•3w ago

No. createEffect exist so that changes in the reactive values can manipulate the outside world. So you would use createEffect to observe the change in a reactive value with console.log().

peprOP•3w ago

i see fixing the inner component to not use prop destructing fixed the issue

Gaming

Programming

Child Component not Re-rendering

Did you find this page helpful?