Continous Re-Render at application startup

[SrinivasPrabhu794]

Hi All,

In this minimal code block below, I am trying work with Flux.ai's Thomas Text engine and have written a simple App.js to render 6400 text. This works well and shows all the text on the scene correctly.

The strange part here is that at startup the Text2DScene re-renders three times. If I return a simple drei component like instead of SDFTextProvider then it just renders once. But this re-rendering is happening inspite of not having any state changes in this component or anything obvious. Am I missing something here ?

I created this code snippet as a replica of a part of my bigger app which has these constant re-renders at startup of all the components nested under component. I am new to r3f and any help would be appreciated.

import { SDFText, SDFTextProvider } from 'thomas'

const Text2DScene = () => {
    const side = 80

    const {  camera } = useThree();

    const fontPathRegular = {
        sdfPath: 'isocpeur.png',
        fontPath: 'ISOCPEUR-msdf.json',
    }

    const fontPathBold = {
        sdfPath: 'isocpeur.png',
        fontPath: 'ISOCPEUR-msdf.json',
    }

    return (
        <SDFTextProvider fontPathRegular={fontPathRegular} fontPathBold={fontPathBold}>
            <group >
                {new Array(side * side).fill(0).map((_, i) => (
                    <group key={`Text ${i}`} position={[(i % side) * 5.5, Math.floor(i / side), 0]}>
                        <SDFText bold={false} color={new Color(0, 0, 0)} text={`Textä \n ${i}`} instanceKey={`Text ${i}`} />
                    </group>
                ))}
            </group>
        </SDFTextProvider>
    )
}

export const App = () => {
  return createRoot(document.getElementById('root')).render(
      <Canvas>
        <Stats/>
        <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} />
        <OrbitControls/>
        <Text2DScene/>
      </Canvas>,
  )
}