Errors in segments document

[Densyakun]

• @react-three/drei@10.7.6
• @react-three/fiber@9.4.0
• three@0.180.0
• node version: v22.17.1
• npm (or yarn) version: npm@11.5.2

Problem description:

The Ref based Segments documentation does not include the start and end attributes,
but executing this code results in an error.

Relevant code:

Due to an error, ReactDOM.render could not be used in codesandbox,
so I will only provide the TSX code:

import { Canvas, useFrame } from '@react-three/fiber'
import './App.css'
import { OrbitControls, Segment, SegmentObject, Segments } from '@react-three/drei'
import { useRef } from 'react'

function RefBasedSegments() {
  const ref = useRef<SegmentObject>(null)

  useFrame(({ clock }) => {
    if (!ref.current) return

    ref.current.start.set(0, Math.cos(clock.elapsedTime), 0)
    ref.current.end.set(10, Math.sin(clock.elapsedTime), 0)
    ref.current.color.setRGB(0, 0, 0)
  })

  return <Segments
    limit={1000}
    lineWidth={1.0}
  >
    <Segment ref={ref} />
  </Segments>;
}

function App() {
  return <Canvas>
    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
    <RefBasedSegments />
    <OrbitControls />
  </Canvas>
}

export default App

Suggested solution:

The Segment component requires the start and end attributes to be set.
The correct code is as follows:

...
<Segment ref={ref} start={[0, 0, 0]} end={[0, 0, 0]} />
...

Using useEffect instead of useFrame causes re-rendering,
so memoization of the Segment component is necessary to avoid re-rendering.
Without memoization, re-rendering will reset the vertices.

useEffect is slower than useFrame,
so the documentation should explicitly state that vertices and colors should be modified within useFrame,
or that the Segment component must be memoized when using useEffect.