search

solidjs / solid-docs-legacy

OLD documentation for SolidJS and related packages, replaced by https://github.com/solidjs/solid-docs-next
https://www.solidjs.com/
MIT License
188 stars 151 forks source link

The children utility function causes the child components to initialize in advance. #279

Open siaikin opened 1 year ago

siaikin commented 1 year ago

Describe the bug

I use Context to inject some data globally, and I optimize the access to children according to the examples given in the tutorial, that is, using the children utility function to wrap props.children. However, the child components always access the initialValue of createContext through useContext, instead of the data I provide through Provider.

Your Example Website or App

https://playground.solidjs.com/anonymous/29fa1b7c-efd7-4f32-a6f7-1a37c22b047c

Steps to Reproduce the Bug or Issue

  1. Go to https://playground.solidjs.com/anonymous/29fa1b7c-efd7-4f32-a6f7-1a37c22b047c
  2. Button render -1, this is initialValue.
  3. Please comment out this IS NOT WORK code, 16-19 lines.
  4. Than comment in IS WORK code, 22-24 lines.
  5. Butten Render -2, this is provide by Context.Provider.

Expected behavior

I hope that when using the children utility function, the child components will not be initialized in advance, causing useContext to be unable to get the provided value.

Screenshots or Videos

No response

Platform

Additional context

No response

titoBouzout commented 1 year ago

See this https://github.com/solidjs/solid/issues/1926 TLDR: using children changes the context on which things run, so children isn't evaluated inside the context as you may expect.

siaikin commented 1 year ago

See this solidjs/solid#1926 TLDR: using children changes the context on which things run, so children isn't evaluated inside the context as you may expect.

very grateful for your answer, I spent several hours troubleshooting this issue. Perhaps we could add explanations to the documentation or tutorials to explain this hidden behavior.

ryansolid commented 1 year ago

Yeah docs could be clearer here with a context example. We say that it resolves the children so they can be introspected, but for those not familiar with that Solid doesn't use a VDOM so resolved means do the rendering it isn't obvious this can happen. We use conditional rendering as an example but not context. https://www.solidjs.com/docs/latest/api#children