Progressive hydration strategy with context about react-rendering-strategies HOT 7 OPEN

Interesting. Tricky but not impossible.

You could try to move the provider inside the ProgressiveHydration component instead. This should enable the context to be available inside the progressive hydrated content as well.

<ProgressiveHydration>
  <Context.Provider value="example">
     <Content />
  </Context.Provider>
</ProgressiveHydration

from react-rendering-strategies.

Yes, sadly, I would say is a limitation for the strategy as well. :( As you said, duplicating these contexts will create two states for it and thus won't share the same. I will investigate about this limitation in order to try some workaround but, for get this working, more likely some inside ReactDOM work should be done.

from react-rendering-strategies.

@midudev The same seem to happen with connect function from react-redux in children, do we have a workaround for the same?

Error:

connectAdvanced.js?fe33:245 Uncaught Error: Could not find "store" in the context of "Connect(LinkBase)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(LinkBase) in connect options.

from react-rendering-strategies.

@midudev is not possible to share context values between Progressive hydration parts like, for example, for I18nProvider?:

I'm looking for something like:

<Layout>
  <I18nProvider>

   {/* FIRST PROGRESSIVE HYDRATION SECTION */}
    <ProgressiveHydration>
      <Section1 />
    </ProgressiveHydration>

   {/* SECOND PROGRESSIVE HYDRATION SECTION */}
    <ProgressiveHydration>
      <Section2 />
    </ProgressiveHydration>

  </I18nProvider>
</Layout>

Doing this, in this case, is not the solution:

<Layout>

   {/* FIRST PROGRESSIVE HYDRATION SECTION */}
  <ProgressiveHydration>
    <I18nProvider>
       <Section1 />
    </I18nProvider>
  </ProgressiveHydration>

  {/* SECOND PROGRESSIVE HYDRATION SECTION */}
  <ProgressiveHydration>
     <I18nProvider>
       <Section2 />
      </I18nProvider>
  </ProgressiveHydration>

</Layout>

Here we are duplicating the i18n context in each section.

So, is there that limitation doing the hydrate manually inside the ProgressiveHydration 😕?

from react-rendering-strategies.

But, is the solution working? There's no problem duplicating the i18n context provider. In fact, using Context.Provider more than once could be typical for some cases.

As it's using internally hydrate it could be assuming is a different root and, thus, you need to provide the context. The problem would be if the Context has some kind of internal state that could be tricky... should work, but I'm not sure. :) Definitely should work correctly for read-only context.

from react-rendering-strategies.

It works in a read-only context as you said.

I've put before the example of I18nProvider custom provider but maybe is not so clear, my bad. In my case, I have more than one custom provider with their own state, maybe a better example is the CartProvider, when you can consume everywhere which product is already in the cart, etc. (as a redux store).

So duplicating these contexts mean duplicating different state instead of sharing the same.

from react-rendering-strategies.

Thanks for the great react rendering strategies - I too am having the issues that @Jeevan-Kishore described above. I tried implementing the work-around that was described here:

GoogleChromeLabs/progressive-rendering-frameworks-samples#2 (comment)

Unfortunately, I was not successful.

@midudev - do you have any suggestions or have you experienced this issue with any of your apps? If so, how did you go about addressing them?

from react-rendering-strategies.