React-three-fiber: Blocking errors on resize if I use hooks with Points (with bufferGeometry and shaderMaterial)

[dghez]

Hey there!
I have a component that essentially is a Points object. Everything runs fine until I insert any kind of react-three-fiber hooks.
I tried with useRender and useThree and even with nothing inside the function I get an error (see below) only when I resize.
I tried to move the the hooks to the parent container and nothing changed, I still get the same error.

I tried to create another component, like a simple cube, and use some hooks inside of it and I don't get any error.

Could it be a bug? Does anyone ever experienced it?

import React, { useRef, useMemo } from 'react'
import { random } from 'lodash'
import vertex from '~/shaders/backgroundStars.vert'
import fragment from '~/shaders/backgroundStars.frag'

const PI = Math.PI

export default function BackgroundStarsField ({ amount, radius }) {
  const field = useRef()



  function Field () {
    /// def vertices
    const vertices = useMemo(() => {
      return new Float32Array(amount * 3)
    })

    /// def theta (vertical)
    const thetaAngles = useMemo(() => {
      const arr = []

      for (let i = 0; i < amount; i++) {
        arr.push(random(0, PI, true))
      }

      return new Float32Array(arr)
    })

    /// def theta (horizzontal)
    const phiAngles = useMemo(() => {
      const arr = []

      for (let i = 0; i < amount; i++) {
        arr.push(random(0, PI, true))
      }

      return new Float32Array(arr)
    })

    const uniforms = {
      uRadius: {
        type: 'f',
        value: radius
      }
    }

    return (
      <points
        ref={field}
        frustumCulled={false}>
        <bufferGeometry attach="geometry">
          <bufferAttribute
            attachObject={['attributes', 'position']}
            count={vertices.length / 3}
            array={vertices}
            itemSize={3}
          />
          <bufferAttribute
            attachObject={['attributes', 'aTheta']}
            count={thetaAngles.length}
            array={thetaAngles}
            itemSize={1}
          />
          <bufferAttribute
            attachObject={['attributes', 'aPhi']}
            count={phiAngles.length}
            array={phiAngles}
            itemSize={1}
          />
        </bufferGeometry>
        <shaderMaterial
          attach="material"
          args={[{ uniforms: uniforms, vertexShader: vertex, fragmentShader: fragment }]}
        />
      </points>
    )
  }

  return (
    <Field/>
  )
}

[drcmda]

could you pour this one into a codesandbox?

[dghez]

Hey, sorry for the delay!
I finally found the time to make the sandbox -> here the link

If you go to the BackgroundStarsField.js file on line 34 you can find the issue.
Now everything works but if you un-comment the lines for the useRender it gives exactly the error above.
Keep in mind, I don't know why, on the sandbox it happens indipendently of the resize, that's is different from what happens on my mac, it probably depends because I changed something while re-create the example I think.

ps: Since I did a lot of copy paste maybe there is some un-necessary code all around.

[drcmda]

not sure if that was it but the way the BackgroundStarsField component was built seemed weird to me from a react perspective: https://codesandbox.io/s/jovial-albattani-khryg

[dghez]

What was weird to you? Just to understand

[drcmda]

function Component() {
   const ref = useRef()
   function SomeComponent() {
     useSomeHook()
     return <JSX ref={ref} />
   }
   return <SomeComponent />
}

i basically removed the inner component, which seemed unnecessary, and it started working.