useContext to share MouseEvent state across React Components

[lancemk]

Hi all,

I am working on a project to make use of PointerEvent in canvas.tsx

I was using useContext Hooks but realized it was impossible to include PointPrinter and App together as children in Provider method

Code summary :

import React, { useContext, createContext } from 'react'
import { Canvas } from 'react-three-fiber'

const pointContext = createContext()

function PointPrinter() {
  const { point, setPoint } = useContext( pointContext )
 return <div> { point } <div>
}

function Provider() {
  const [point, setPoint] = useState({ x:0, y:0 })

  return(
    <pointContext.provider value={ [point, setPoint] } >     
        <PointerPrinter>
        <App />
    </pointContext.provider>
  )
}

export default App() {
  const { point, setPoint } = useContext( pointContext )
  return (
    <Provider>
      <Canvas>
        <mesh onPointerDown = { event => setPoint(event.point) } 
          // An 3D Object in Canvas
         /> // point is not updated with the mesh PointerEvent
      </Canvas>
    </Provider>
  )
}

Anyone came across the same difficulties when trying to access event states with another pure React component? Any explanation is highly appreciated in advance! Thank you.

[drcmda]

context in react does not pierce reconcilers, take a look: #262

you can either solve it by forwarding context, but i recommend zustand: https://github.com/react-spring/zustand

[lancemk]

Solution on #262 appears to require component to be child of <ForwardCanvas />, which is inside <Canvas /> component . However, I do need the state value be accessed from a react component "outside of <Canvas /> ".

Or is it possible to child a component to render a <div> textbox </div> within ?

[drcmda]

i misread. all that i can see thats most certainly is an error is how you put an array into the context provider without memoizing it. that will trigger consumers every time the provider re-renders, regardless if state has changed or not. if that makes your problem go away i dont know, it shouldnt matter from where "setPoint" is called, when you set it, it has to update.

[lancemk]

Instead of using useContext, I have restructure the app to a single React Class Component.

I make all subcomponents and functions as property in the main class component, so states are shared amongst. Thanks for the help!

[stephencorwin]

Forwarding context is actually pretty easy. I ended up crafting this small bridge component as a helper utility.

import React, {FC, useMemo} from 'react';

const ContextBridge = ({contexts = [], children}) => {
  const reversed = useMemo(() => contexts.reverse(), [contexts]);
  return reversed.reduce(
    (acc, {context: Context, value}) => (
      <Context.Provider value={value}>{acc}</Context.Provider>
    ),
    children
  );
};

export default ContextBridge;

Usage:

const MyApp = () => {
  const ContextValue1 = useContext(Context1);
  const ContextValue2 = useContext(Context2);
  return (
    <Canvas>
      <ContextBridge
         contexts={[
          {context: Context1, value: ContextValue1},
          {context: Context2, value: ContextValue2},
        ]}
      >
       {/* R3F content goes here */}
      </ContextBridge>
    </Canvas>
  )
}

export default MyApp;

Basically, it just recursively nests each provider in the order that it is given. It was definitely a fun use of the reduce method 😄

[algopapi]

How would i import Context1/Context2, in
const ContextValue1 = useContext(Context1);
const ContextValue2 = useContext(Context2);

Also,
would this implementation rerender the Canvas component everytime the context state changes?

[drcmda]

the drei library has a components for that now. and yes, context re-renders everything. it doesn't mean anything is done from scratch but react goes through some unneeded diffing. you can use zustand and avoid all of it, zustand goes through multiple renderers effortlessly and it's render optimized, nothing renders except the components whose state slice changed.