Hydration Mismatch

[bronze schooner]

function Test() {
    return <div>test</div>;
}
function Main() {
    const a = Test(); 
    return (
        <>
        </>
    );
}

Why this can cause Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: s00-0-0-0

EDIT:
The component constructed before return in the function body must be used in the return html. Otherwise, it will cause the Hydration Mismatch error.

This issue will disable the Show logic for the component.
Neither

<Show when={should_show()}>
  {a}
</Show>

or

{should_show() ? a : undefined}

can be used. Both of them will cause the Hydration Mismatch error.

[maiden pendant]

use children to render a child as a signal. But your example is too concise to be of any help toward your goal

[bronze schooner]

thank you, i'll go check children

[bronze schooner]

Hi, I appended some issue description in the main post.

[maiden pendant]

Hum still unclear, but with solid you keep everythin as a signal, I dont undestand the need to call Test ouside of the reactive render scope

[white grail]

Perhaps using a render thunk will work for you:

import { render } from 'solid-js/web';
import { createResource, Show, Suspense } from 'solid-js';

function fakeAsyncOp() {
  return new Promise<string>((r) => setTimeout(r, 2000, 'Done'));
}

function Test(props: { content: string }) {
  return <p>{props.content}</p>;
}

function App() {
  // deferStream works with createAsync as well
  const [result] = createResource(fakeAsyncOp, { deferStream: true });

  // This is the important part
  const renderFn = () => <Test content={result() ?? `don't care`} />;

  return (
    <>
      <h1>Hi there!</h1>
      <Suspense fallback={<p>loading…</p>}>
        <Show when={result() ? renderFn : undefined}>{(fn) => fn()()}</Show>
      </Suspense>
    </>
  );
}

render(() => <App />, document.getElementById('app')!);

https://playground.solidjs.com/anonymous/6ca2a1bd-eb77-4647-b822-8881ac7b0320

[maiden pendant]

I mean, coding like this will derive into a nightmare, better using result as props in Test and a Show inside Test

[white grail]

It's a contrived example to demonstrate using a “render-prop” to defer rendering until some later, more appropriate time.

The <Suspense /> and { deferStream: true } were thrown in to mitigate the the most common cause of SSR hydration errors with the default streaming renderer.

For some background see:
#1238643925988937820 message

[bronze schooner]

Because I’d like to get both the component and some inner signals from outside. So I return an array in the component function. Then I have to construct the component before the html part.

[bronze schooner]

Thank you. I’ll check this out.