Losing React Context in <Canvas/> children

[jniac]

It seems that react contexts cannot be passed through the <Canvas/>.
Here is an example in codesandbox: https://codesandbox.io/s/wizardly-borg-kvhn4

Sample code:

const ColorContext = createContext('???')

const LosingColor = () => {
  const color = useContext(ColorContext)
  console.log(color) // color is '???' (the default value)
  return null
}

const UsingColor = () => {
  const color = useContext(ColorContext)
  console.log(color) // color is 'red' (ok)
  return null
}

ReactDOM.render(
  <ColorContext.Provider value="red">
    <Canvas>
      <LosingColor />
    </Canvas>
    <UsingColor />
  </ColorContext.Provider>,
  document.getElementById('root')
)

Is there any solution?

Motivation:
Eg, using context to propagate theme settings to dom & three components.

[joshuaellis]

I think this is written in the documentation as a caveat. You should check out ‘drei’s contextBridge component

EDIT: https://github.com/pmndrs/drei#usecontextbridge

[jniac]

https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#consuming-context-from-a-foreign-provider
Indeed

[drcmda]

this is a react issue, but we'll add a workaround in v6, you can already try it, it's in the alpha channel but we're days before publishing it so it's stable

<Canvas context={[ColorContext]}>
  <LosingColor />
</Canvas>

EDIT (josh): we're not supporting context passing this way.

[jniac]

Hi thx for the update. I know from your code samples (at least the one i'm gone through) that your aren't using React contexts in your experiences. There may be better ways to create/manage state than context (zustand from your point of view). But context is still an "official" way to do it. I'm glad to hear that the next version will support it.
Forgive my question, is there an easy way to use the v6 alpha channel from npm?

[joshuaellis]

But context is still an "official" way to do it.

I think that's your opinion. Also, after a discussion, we're not supporting passing contexts. We have a component in drei to do that and it creates an unnecessary overhead.

[jniac]

If only it was mine. Anyway you should have good reasons.
https://github.com/pmndrs/drei#usecontextbridge

[drcmda]

context not piercing reconcilers is a long known bug or issue in react. all react renderers out there suffer from it. but after going back and wroth trying to hack something in, i agree with @joshuaellis it just makes a mess. dreis usecontextbride is and easy and clean solution until react fixes it imo.