[Bug?]: Hydration Mismatch when using children

[doeixd]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Hello, I am getting a hydration mismatch error when attempting the following in ssr mode :

import { children } from "solid-js";

export default function App() {
  return (
    <Holder>
      <h2> Wont show </h2>
    </Holder>
  );
}

function Holder(props) {
  const _kids = children(() => props.children);
  return <h2> Will Show </h2>;
}

This could entirely be my misunderstanding. Please let me know

here is the error:

Expected behavior 🤔

I would expect the return value of Holder to render as normal

Steps to reproduce 🕹

Reproduction Link

Context 🔦

I am attempting to have the children of a component add values to a context item, then render the result with that context.

Similar to:

function List () {
  let context = createMutable({
    items: []
  })

  let _renderedChildren = children(() => ( 
    <ListContext.Provider value={context}>
      {localProps.children}
    </ListContext.Provider>
   ))

  return (
    <For each={context.items}>
      {(item) => <div>{item.name}</div>}
    </For>
  )
}

Your environment 🌎

No response

[ryansolid]

There is an existing issue in Solid related to this. It has to do with the eager resolution of computeds. solidjs/solid#1977.

That being said what you are trying to do might not work the way you are expecting. When props.children is accessed is when the children are rendered. The example above doesn't quite make sense..where is _renderChildren used?.. how is context.items ever set?

[doeixd]

Thanks for letting me know about the issue. I probably should've checked the Solid repo first.

Thanks for the feedback! Maybe there is a better way to accomplish my goals?

Here is an example of what I'm trying to do

_renderChildren is not used, it is just there to access the props.children, and allow those children to have access to the list context. context.items would be set by the children who use that context.

[ryansolid]

If _renderedChildren is never read then this is quite a different scenario than I was thinking. You just want to run those components in that context and have them write to your context. This sort of a synchronous effect. It probably could just be run top level without a wrapper. That being said I imagine the problem is probably downstream. Ie real DOM elements are getting rendered during that pass whereas really you want to pass back configuration. It's hard for me to see all the layers.

[ryansolid]

I don't know what to do with this one, as the behavior is by design but I don't have enough information to offer a better solution. If you want to chat about this more maybe flag me in a discussion or on discord.