porting over some ssr react code, getting different behavior

this nextjs code

// foo.tsx
"use client";

import { useEffect, useState } from "react";

export default function Foo() {
    const [foo, setFoo] = useState<HTMLDivElement | null>(null);
    const isFormControl = foo ? Boolean(foo.closest("form")) : true;

    console.log(isFormControl);
    useEffect(() => {
        console.log(isFormControl);
    }, [isFormControl]);

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            {isFormControl && <div>hello world 2</div>}
        </>
    );
}

// foo.tsx
"use client";

import { useEffect, useState } from "react";

export default function Foo() {
    const [foo, setFoo] = useState<HTMLDivElement | null>(null);
    const isFormControl = foo ? Boolean(foo.closest("form")) : true;

    console.log(isFormControl);
    useEffect(() => {
        console.log(isFormControl);
    }, [isFormControl]);

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            {isFormControl && <div>hello world 2</div>}
        </>
    );
}

// page.tsx
import Foo from "./test";

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

// page.tsx
import Foo from "./test";

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

produces this

6 Replies

ARSON•3mo ago

then i've got this code with solidstart

// index.tsx
import { clientOnly } from "@solidjs/start";

const Foo = clientOnly(() => import("../components/Foo"));

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

// index.tsx
import { clientOnly } from "@solidjs/start";

const Foo = clientOnly(() => import("../components/Foo"));

export default function Home() {
    return (
        <>
            {/* <form> */}
            <Foo />
            {/* </form> */}
            {/* <form> */}
            <Foo />
            {/* </form> */}
        </>
    );
}

// foo.tsx
import { Show, createEffect, createSignal } from "solid-js";

export default function Foo() {
    const [foo, setFoo] = createSignal<HTMLDivElement | null>(null);
    const isFormControl = () => (foo() ? Boolean(foo()!.closest("form")) : true);

    console.log(isFormControl());
    createEffect(() => {
        console.log(isFormControl());
    });

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            <Show when={isFormControl}>
                <div>hello world 2</div>
            </Show>
        </>
    );
}

// foo.tsx
import { Show, createEffect, createSignal } from "solid-js";

export default function Foo() {
    const [foo, setFoo] = createSignal<HTMLDivElement | null>(null);
    const isFormControl = () => (foo() ? Boolean(foo()!.closest("form")) : true);

    console.log(isFormControl());
    createEffect(() => {
        console.log(isFormControl());
    });

    return (
        <>
            <div ref={node => setFoo(node)}>hello world</div>
            <Show when={isFormControl}>
                <div>hello world 2</div>
            </Show>
        </>
    );
}

ARSON•3mo ago

which produces

ARSON•3mo ago

wondering what's causing the differences and how i can solve it

foolswisdom•3mo ago

Try

<Show when={isFormControl()}>

<Show when={isFormControl()}>

Your current code is checking the truthiness of the isFormControl variable, not the truthiness of the result of the function. BTW (this doesn't quite matter in your code, but) although it looks like passing isFormControl() is passing a static value rather than a reactive value, solid's jsx transform wraps and lazifies the call (this is true only in jsx), so when the Show component internally accesses props.when it's actually calling the function (which subscribes to the value of Foo). This is how you normally pass props to components in solid

ARSON•3mo ago

oh, looks like that did it good to know, thanks!

foolswisdom•3mo ago

👍

Gaming

Programming

porting over some ssr react code, getting different behavior