[Bug?]: Hydration Mismatch during Development. Nesting element within an object will break hydration.

[edygar]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Route throws consistently when accessing it during development, any time the route is accessed. Production build seems to work fine. Anticipating this question, it doesn't influences at all, restarting the server doesn't affect it..

Expected behavior 🤔

It shouldn't throw.

Steps to reproduce 🕹

Steps:

1. Create a route with the following code:

import type { JSX } from "solid-js";

const ReproduceSteps = (props: {
  test: { propertyBesidesElement: JSX.Element; element: JSX.Element };
}) => {
  return (
    <button onClick={() => console.log(props.test)}>
      {props.test.propertyBesidesElement}
    </button>
  );
};
export default function BugReport() {
  return (
    <ReproduceSteps
      test={{ propertyBesidesElement: "test", element: <div>test</div> }}
    />
  );
}

2. Run the project in dev mode
3. Access the route

Context 🔦

I've reduced it to the minimal reproducible code. Let me know if anything else is required. Couldn't find this same bug on other issues so I decided to report.

Your environment 🌎

System:
OS: MacOS Sonoma 14.4.1
CPU: Apple M1 Pro (16 GB of Memory)
Binaries:
Node: v20.10.0 - $HOME/.volta/bin/node
pnpm: 8.14.0 - $HOME/.volta/bin/pnpm
npmPackages:
"@solidjs/meta": "^0.29.3",      
"@solidjs/router": "^0.13.3",    
"@solidjs/start": "^1.0.0-rc.1", 
"solid-js": "^1.8.17",           
"vinxi": "^0.3.11"

[peerreynders]

Context: Original Discord discussion.

TLDR: Feels that requiring a render thunk

import type { JSX } from 'solid-js';

const ReproduceSteps = (props: {
  test: {
    propertyBesidesElement: () => JSX.Element;
    element: () => JSX.Element;
  };
}) => {
  return (
    <button onClick={() => console.log(props.test)}>
      {props.test.propertyBesidesElement()}
    </button>
  );
};

export default function App() {
  return (
    <ReproduceSteps
      test={{
        propertyBesidesElement: () => 'test',
        element: () => <div>test</div>,
      }}
    />
  );
}

to support SSR is poor DX.

[ryansolid]

The reason is that technically every time you call props.test you are remaking the DOM elements. Some are being inserted and the others aren't, and aren't being found. In the past we were more lenient here creating new DOM elements in these cases and just warning. But this isn't a good pattern anyway as you are basically doing wasted work by rendering twice. If you access props multiple times we recommend using children.

[edygar]

Got it:

vs:

Conclusion: _tmpl$2( ) fit into the heuristic, compiler turned this property into a lazily computed one, so the object is rebuilt every time the property is accessed, hence a new element is created, hydration mismatch. So, the solution is to simply wrap the props.test reading, through a memo (createMemo).

But I'm accessing only once in the Entire ReproduceSteps server's runtime. Why did it throw anyways?

[edygar]

Also, I see this as very risk approach, I don't to be recreating "consumer" elements all the time. Besides @peerreynders's recommendation, and "3 Patterns to Write Declarative, More Readable SolidJS Components", what are the alternatives? What is the best one to compose layouts off of consumer provided elements?

I intend to contribute on the documentation, xD to put a very big warning there against this pattern, which I'm very used from React-based codebases.