Is it possible to share contexts between renderers?

[diegomura]

What is the current behavior?

Hey 👋 I maintain react-pdf. Thanks for your awesome work and making react-reconciler for us to use!

I've got many issues lately regarding context not working on my library and when doing tests I found out that context values aren't shared between renderers. This makes it impossible to share state such as themes, i18n, redux and more. As a bit of context, React-pdf is not a primary renderer, and as such, when used in the browser it runs on top of react-dom.

I found the isPrimaryRenderer reconciler option that's supposed to be used for "multiple renderers concurrently render using the same context objects" but still any access of the context inside react-pdf components get's just the initial value (even if the context was updated with other value). The same happens for react-art that also set isPrimaryRenderer=false.

Minimal demo

I prepared a quick demo using react-art so you can see how it currently works:

https://codesandbox.io/s/pedantic-hill-54kid?fontsize=14

What is the expected behavior?

Share contexts between renderers when using isPrimaryRenderer config. Is there a way of achieving this? Am I missing something?

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React: 16.11.0
React-dom: 16.11.0

[sophiebits]

Check out how react-art’s Surface component works. In particular, pass a class component’s “this” value to updateContainer:

https://github.com/facebook/react/blob/master/packages/react-art/src/ReactART.js

Hope that helps.

[markerikson]

Paging @drcmda and @lavrton , who might be interested in bridging contexts between renderers.

[drcmda]

@sophiebits is this possible with function components as well?

[lavrton]

@markerikson thanks for mentioning.

@sompylasar, unfortunately, it doesn't help. The minimal demo, posted by @diegomura, shows the issue with react-art.

Related issue: #13332

As far as I know, there are currently no ways to pass contexts automatically into other renderers.
The workaround is to "bridge" the context manually:

<ThemeContext.Consumer>
      {value => (
        <Stage width={window.innerWidth} height={window.innerHeight}>
          <ThemeContext.Provider value={value}>
            <Layer>
              <ThemedRect />
            </Layer>
          </ThemeContext.Provider>
        </Stage>
      )}
</ThemeContext.Consumer>

[diegomura]

@lavrton I came up to the same conclusion, although in my quick test just adding the context provider inside my renderer elements was enough to bridge the state (without manually passing value from one consumer to the provider). But I might have to check that again.

@sophiebits thank you so much for you quick response, but as @lavrton said, this issue is also happening in react-art. Does that means this is a bug?

[RodrigoHamuy]

Hi @lavrton , do you know why is not possible to pass context between renderers automatically? Sorry, it is still not clear to me why this doesn't work.

Coming from the same issue but with react-pixi:

Demo: https://codesandbox.io/s/react-pixi-context-example-eky26
Issue: pixijs/pixi-react#165

Thanks

[drcmda]

It only looks like the jsx you're giving to pixi via the stage component is in the same tree as the dom related jsx, which belongs to the react-dom reconciler, the one that holds the context provider. stage constructs a new reconciler, which is entirely isolated, and renders the children it received (the jsx inside stage). pixies reconciler has no idea where it is, it bears no relation to the surrounding reconciler and can't share its dynamics, like context, suspense, error boundaries and so on.

if react wanted to solve this we would probably need something like a first class react component, like a portal, which is returned by the react-reconcilers createContainer function. this will be rendered into the root reconciler as a regular element belonging to its tree. this way it would know it must pass its internals on. @gaearon described something like that once, but can't find it right now.

[jquense]

This doesn't seem to be solved? I'd also really like to see this happen!

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[drcmda]

It's very much still affecting us