preactjs / signals

Manage state with style in every framework
https://preactjs.com/blog/introducing-signals/
MIT License
3.79k stars 93 forks source link

Signal Passing to Component in Array #280

Open jesseagleboy opened 1 year ago

jesseagleboy commented 1 year ago

Initially, I had a map set up to lay out my components in React and was using Signals to pass data from the top level. However, none of the data derived from the Signals in the children components were updating on changes. Once I took out the mapping of components and explicitly wrote out the layout at the parent level, Signals were working normal again. Is there some sort of block that happens with an array but not with manually writing out the components?

jesseagleboy commented 1 year ago

I actually solved this issue but raised another issue. Apparently the signals don't update if a component was lazy loaded (React.lazy). My components were hence why the the problem happened before. But if code-splitting and lazy-loading seem like the route to go with, how can one use Signals with a lazy-loaded component?

sahithyandev commented 1 year ago

I am having the same issue. I am rendering lazily loaded components as pages, and Signals are not working as intended. (I will provide a reproduction soon, if needed)

Are there any workarounds?

jesseagleboy commented 1 year ago

I wasn't proud of this workaround and may not be helpful with code-splitting or bundle size, but I created a wrapper component. The wrapper (or parent) component would use the regular import x from y syntax of the actual component being used and the wrapper component would be the one that would be lazily loaded.

The component being lazily loaded would be the wrapper component and when mounted, that parent component would regularly import the actual component being used. The signals are all inside the actual component and they would not be used directly in a component being lazily loaded. (If I have time, I will try to create an example)