How to access parent data in useFrame

[runemadsen]

I have a custom component called Sticky which I wrap around my Canvas to make it stick to the top of the screen during scroll (with CSS position: sticky). This component has an onChange callback that gets called when the canvas is sticky or not.

const Main = () => {
  const onChange = state => {
    console.log('NEW STATE', state);
  };

  return (
    <Sticky onChange={onChange}
        <Canvas>
          <Box position={[-1.2, 0, 0]} />
        </Canvas>
    </Sticky>
  );
};

My Box component renders a THREE.js boxBufferGeometry, but I want the box to change color whenever the canvas is sticky. I basically need to pass the Sticky state to the Box component so I can use this inside the useFrame hook.

const Box = props => {
  
  useFrame(() => {
    // I need the Sticky state update here!
  });

  return (
    <mesh {...props}>
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <meshStandardMaterial
        attach="material"
        color={"orange"}
      />
    </mesh>
  );
};

However, if I do what I'd normally do with React and pass this as a prop to Box, it will re-render the entire sketch, and I don't want this to happen. The question here is how do I access data from the parent inside a react-three-fiber component without re-rendering the whole damn thing? I've tried React.createContext, but that will also re-render the component. The only solution I can think of is to rely on a global variable, but this defeats the purpose of React and makes it impossible to use multiple instances of the component.

Or said another way: If I can't rely on props to update the Three sketch, how do I pass data from the parent to the THREE sketch?

[drcmda]

not sure what you mean when you say it re-renders the whole sketch or that you can't rely on props --- why can't you? if you pass a fresh prop it re-renders the component, that's react. if you don't want that to happen indiscriminately there's React.memo, which only renders when props actually change - but i don't see how that little flag can cause any relevant overhead here.

you can of course access props in useframe, but ... to change a color? useframe runs 60 times per second, it's a loop.

this is what you would do in any other react app:

function App() {
  const [sticky, set] = useState(false)
  return (
    <Sticky onChange={set}>
      <Canvas>
        <Box sticky={sticky} />
      </Canvas>
    </Sticky>
  )
}

function Box({ sticky, ...props }) {
  return (
    <mesh {...props}>
      <meshStandardMaterial attach="material" color={sticky ? "red" : "orange"} />

[drcmda]

for rapid state changes you may be interesting in zustand: https://github.com/react-spring/zustand/#transient-updates-for-often-occuring-state-changes

this state manager can update components without causing render. but for your case i dont think it's needed.

[runemadsen]

Thanks @drcmda. I had the impression after reading pitfalls.md that the THREE.js objects would re-initialize when the component re-rendered, but I can see now that it's not the case. I'll just pass it as a regular prop. Thanks for the quick reply!

[drcmda]

they do if you change args. but not for props. you are probably referring to the bit about rapid succession updates, this is where useframe and refs can be great. just had an example for that https://codesandbox.io/s/gallant-elbakyan-lvwmj?file=/src/App.js:1362-1439 look at the useFrame inside the grid component. it reads the scroll offset outside of react.

[runemadsen]

Great. Thanks a bunch!