Undefined BufferGeometry at first render with useUpdate

[loichuder]

Hi there 👋

I am trying to display a curve with lines and points from a list of coordinates. For this, I use a BufferGeometry that I want to share between the line and the points. I used imperative code without trouble:

// This works
const dataGeometry = useMemo(() => {
  const geometry = new BufferGeometry()
  geometry.setFromPoints(points)
  return geometry
}, [points])

return ( 
  <>
  <points geometry={dataGeometry}>
      <pointsMaterial attach="material" />
    </points>
    <line geometry={dataGeometry}>
      <lineBasicMaterial attach="material" />
    </line>
  </>)

I wanted then to move to something more declarative with useUpdate. I then used the following code

const ref = useUpdate((geo) => geo.setFromPoints(points), [points])
return (
  <>
    <bufferGeometry ref={ref} />
    <points geometry={ref.current}>
      <pointsMaterial attach="material" />
    </points>
    <line geometry={ref.current}>
      <lineBasicMaterial attach="material" />
    </line>
  </>
  )

However, netiher the line nor the points are displayed at first render (ref.current is indeed undefined). Triggering a render one way or the other makes the line and points appear as ref.current becomes the expected BufferGeometry.

I reproduced the issue in this CodeSandbox. Launching the app shows nothing but resizing the window makes the line and points appear.

Am I doing something wrong here ? What would be the recommended way for sharing geometries declaratively ?

[drcmda]

useUpdate calls you back after the object has rendered. but it doesnt cause a render by itself. in other words, you render, both points and line receive "undefined" (ref.current), then you fill the buffergeometry. i would do it like in your first solution.

[loichuder]

Thanks for the quick reply ! 🚀

I will do as you said but just for curiosity, would there be a way to solve this by combining useUpdate with useResource ?

[drcmda]

yes, useResource will call one additional forceUpdate but as soon as youre waiting for renders to come back that seems to be a good sign that it should be easier. hooks were made to control imperative behaviour after all.