SolidJS•3mo ago

Hydration errors with inline JSX

const EyeIcon = (props: { show: boolean }) => {
    const closedEye = (<svg/>/*omitted for brevity*/</svg>);
    const openEye = (<svg/>/*omitted for brevity*/</svg>);
    return (<Show when={props.show} fallback={closedEye}>
        {openEye}
    </Show>)
};

const EyeIcon = (props: { show: boolean }) => {
    const closedEye = (<svg/>/*omitted for brevity*/</svg>);
    const openEye = (<svg/>/*omitted for brevity*/</svg>);
    return (<Show when={props.show} fallback={closedEye}>
        {openEye}
    </Show>)
};

This gives me a hydration error with Astro. IF I extract the Open and Closed eye to their own components, it's all fine. Is this a bug, or am I misunderstanding something with regards to Solid (i.e. am I being React-Brained)?

1 Reply

Jasmin•3mo ago

hydration doesn't do well with elements that are created outside of where their final place is gonna be in the jsx. Convert closedEye and openEye to functions that return the jsx and it should work.

const closedEye = () => <svg>...</svg>

const closedEye = () => <svg>...</svg>

Gaming

Programming

Hydration errors with inline JSX