React-three-fiber compatibility

[xixixao]

I would like to use React with react-three-fiber to sync state between Three.js Canvas and the rest of the page. Unfortunately this doesn't work atm, Recoil can only be used to sync state inside the Canvas.

This works:

<Canvas>
  <RecoilRoot>
    <ComponentUsingRecoilState />

This doesn't work

<RecoilRoot>
  <Canvas>
    <ComponentUsingRecoilState />

And I need the latter to do something like:

<RecoilRoot>
  <Canvas>
    <ComponentUsingRecoilState />
  </Canvas>
  <AnotherComponentUsingRecoilState />
</RecoilRoot>

Codesandbox for exploration (I don't really know how to debug this as I'm not familiar with Recoil internals):

https://codesandbox.io/s/wizardly-bash-ue9uy

[cometkim]

Related with facebook/react#13332

[drarmstr]

Duplicate of #140

Try using the new useRecoilBridgeAcrossReactRoots() hook from #516. This is currently only in master, but we're working on getting that next release out right now.