React vs Solid wrt contexts

Lets say I have a component.

const Foo = (.....
<component Provider>
  <component />
</component Provider>
);

Foo.Bar = BarComponent.

const Foo = (.....
<component Provider>
  <component />
</component Provider>
);

Foo.Bar = BarComponent.

const Foo = (.....
<component Provider>
  <component />
</component Provider>
);

Foo.Bar = BarComponent.

const Foo = (.....
<component Provider>
  <component />
</component Provider>
);

Foo.Bar = BarComponent.

In BarComponent I have

const ctx = useFooContext();

const ctx = useFooContext();

const ctx = useFooContext();

const ctx = useFooContext();

The problem here. Is that react follows a top to bottom strategy and will render out the components following the hierarchy. So FooProvider gets run first and the context is available.

Whereas with Solid, the BarComponent is then run first and then finds the context to be empty.

Is there any way to work around this?

I either want the BarComponent not be run:

Foo.Bar = BarComponent.

Foo.Bar = BarComponent.

Foo.Bar = BarComponent.

Foo.Bar = BarComponent.

Or to delay it until the context is available.

Are there any solutions here? Thanks

React vs Solid wrt contexts

Similar Threads

Similar Threads

Similar Threads