Does a react state update not cause an update in react-three-fiber's functional component due to the GPU maintaining previous state data?

<DrawCurve data={}/>

suppose the above draws a curve when is “1”.

Why does a state update,causing a react re-render not overwrite a scene with the new data?

Any example of disposing functional components in react-three-fiber based on state update?

any prop update re-renders the component:

function DrawCurve({ data }) {
  // do something with data
  return (
    <someThreejsThing whatever={data}>

how that data change is reflected in the view (threejs) is up to you. if you dont see a change then you’re handling threejs in a wrong way. for instance, geometry was just removed, everything is now a buffergeometry which is slightly more complex to update. some objects can’t be updated, they must be re-instanciated etc.

if you have a codesandbox i can tell you why you don’t see changes but pls reduce it to its minimum. :wink:

Hey drcmda,

The framework I am using is of the company,which they are very adamant to share.I wanted to make a minimum of the code the time you told me npx codesandbox would be sufficient but the data utilized to create the scene are taken from local modules and api calls(loads of backend work) that would take looong to add in a customized framework.

Can you check out the code below?

The below takes in an array vectors and renders a curve.

[Array(200) ]

function DrawCurve({ draw, color }, props) {


      if (draw === undefined) {

        return null;

      } else {


        let curve = useRef();

        curve.current = draw;

        // below converts 200 vectors into 600

        let kurve = new THREE.CatmullRomCurve3(curve.current, false);

        pints = kurve.getPoints(600);

        let interpolationPoints = useRef();

        interpolationPoints.current = kurve.getPoints(6000);

        // console.log(pints);

        //add geometry

        // below creates the dots you see on the screen

        const dotGeometry = useRef();

        dotGeometry.current = new THREE.Geometry();

        pints.forEach(element => {



        // console.log(dotGeometry);

        const material = useRef();

        const mesh = useRef();

        const elapsedTime = clock.getElapsedTime() * 1000;

        const hundredMinutes = 6000000;

        const totalFrames = 6000;

        const frameInterval = useRef();

        frameInterval.current = hundredMinutes / totalFrames;

        const currentFrame = Math.floor(elapsedTime / frameInterval);

        let temp = null;

        const currentVector = useRef();




        useFrame(() => {

          currentVector.current =



                (clock.getElapsedTime() * 1000) / frameInterval.current














        return (

          <points geometry={dotGeometry.current}>




              scale={[1.5, 1.5, 1.5]}



              <boxBufferGeometry args={[2, 2, 2]} />

              <meshStandardMaterial color={color} />


            <pointsMaterial size={0.5} color={'white'} />





The above component is called multiple times based on weather the data from componentDidMount() is an array or not.

{this.state.markers[0] !== undefined ? (

   => (







          ) : (

            <DrawCurve date={dAte} />


The above loops through state to create multiple instances of the functional component.


what i can tell you right off the bat is that this is invalid code. hooks can not be conditional. and you have side effects in the render function, which should be pure, there should be no new etc.

  • local state goes into const [local] = useState(() => new FOO.Bar())
  • local conditional state into const local = useMemo(() => new FOO.Bar(arg), [arg])

here’s an example how you could deal with updated curves: splines - CodeSandbox