I got requestAnimationFrame handler took <N> s

Questions
,
1

**My problem is ** I render 100 sphere in the same time but the component still rerender and I got requestAnimationFrame error and the component as in photo render many times and some times don’t happen what and I want to iterate the spheres with delay so I make hidden in delay in the sphere component but until now I don’t figure out what is my problem and why I got this error from this code

export const ContainerBubblesWorld = ({dataFromApi, selectedPeriod, filterType,currentPage, intervalCount, onSphereClick ,onBoundingBoxesReady,isTracking }) => {
    const {size} = useThree() // Adjust this according to your scene size
    console.log('Component rerendered');

    const [dataReady, setDataReady] = useState(false);
    const [dataFromApiFormated, setDataFromApiFormated] = useState([])

    useEffect(() => {
        console.log('useEffect triggered');
        // and some code to process data 
    }, [size, dataFromApi, selectedPeriod, currentPage, intervalCount,isTracking]);

return <>

             
     
                <Physics  interpolate timeStep={1 / 60} gravity={!(size.width >= 640) ? [size.width / 2, (size.height *2), 0] : [(size.width /2), (size.height /2) , 0]}>
               
                    <BorderWalls />
    
                    {dataReady && dataFromApiFormated.map((props, i) => {

                        return (
                            <Sphere key={`${i}_${props?.symbol}`} index={i}  delay={i * 300} {...props} />
                            );
                        })}
                      
                </Physics>
    </>
}

and this is the sphere component


function Sphere({ index, radius, icon, scale, symbol,lastPrice,priceChangePercent, marketCap,rank,id,symbols, ...props }) {
    const { size } = useThree();
    const [clampedRadius, setClampedRadius] = useState(Math.max(radius - 15, 25));
    const [isVisible, setIsVisible] = useState(false);
    const api = useRef();
    const x = size.width / 2;
    const y = size.height / 2;
    const widthD = `${(radius < 10 ? radius : radius - 10) * 2}px`;

    const dispatch = useDispatch()

    useEffect(() => {
        const timeout = setTimeout(() => {
            setIsVisible(true);
        }, index * 300);
        return () => clearTimeout(timeout);
    }, [index]);

    const formatSymbol = (symbol) => {
        return symbol ? symbol.toUpperCase() : '';
    };

    const formatPriceChangePercent = (priceChangePercent) => {
        const numericValue = parseFloat(priceChangePercent);
        return !isNaN(numericValue) ? numericValue.toFixed(1) : '0.0';
    };

    return (
        isVisible && (
            <RigidBody
                ccd={true}
                mass={5}
                ref={api}
                enabledRotations={[false, false, false]}
                enabledTranslations={[true, true, false]}
                linearDamping={15}
                angularDamping={1}
                friction={0.1}
                position={size.width <= 640 ? [10, -(size.width / 2), 0] : [-x, -y, 0]}
                colliders={false}
                gravityScale={Math.abs(symbols[0]?.rsi[0]?.value) / 28}
            >
                <BallCollider args={[radius]} />
                <Float speed={5} rotationIntensity={0} floatIntensity={50}>
                    <mesh onClick={() => console.log('Clicked!')} scale={0.95} position={[0, 0, 0.01]}>
                        {icon && <Image position={[0, radius < 10 ? radius / 2 : (radius - 10) / 2, 0.01]} scale={radius < 10 ? radius / 3 : (radius - 10) / 3} transparent toneMapped={false} url={icon} />}
                        {symbol && <Text font="Inter-Regular.woff" letterSpacing={-0.05} position={[0, 0, 0.01]} fontSize={radius < 10 ? radius / 3 : (radius - 10) / 3} material-toneMapped={false}>{formatSymbol(symbol)}</Text>}
                        {priceChangePercent && <Text font="Inter-Regular.woff" letterSpacing={-0.05} position={[0, -(radius < 10 ? radius / 2 : (radius - 10) / 2), 0.01]} fontSize={radius < 10 ? radius / 3 : (radius - 10) / 3} material-toneMapped={false}>{formatPriceChangePercent(priceChangePercent)}%</Text>}
                        <Html>
                            <div onClick={() => dispatch(clicking({data: { id,index, radius, icon, scale, priceChangePercent, symbol, symbols, rank, marketCap, lastPrice }}))}  style={{ width: widthD, height: widthD }} className={`${priceChangePercent < 0 ? 'shadow-[inset_0px_0px_20px_rgba(0,49,5,1)]' : 'shadow-[inset_0px_0px_20px_rgba(255,199,6,1)]'} rounded-full mix-blend-screen absolute top-0 left-0 cursor-pointer -translate-x-1/2 z-[99] -translate-y-1/2 hover:border-white hover:border-[.3rem] duration-[1000ms] transition-all`}></div>
                        </Html>
                    </mesh>
                </Float>
            </RigidBody>
        )
    );
}

also I have this where I call the component

 <Canvas orthographic camera={{ position: [0, 0, 200], zoom: 1 }}>
                            <React.StrictMode>
                                <ContainerBubblesWorld
                                    key={key}
                                    
                                    dataFromApi={ultimateData}
                                    selectedPeriod={selectedPeriod}
                                    currentPage={currentPage}
                                    filterType={filterType}
                                    intervalCount={intervalCount}
                                    onBoundingBoxesReady={handleBoundingBoxesReady}
                                />
                            </React.StrictMode>
                        </Canvas>

Annotation 2024-07-06 204949
Annotation 2024-07-06 2049491725×477 36.2 KB

Annotation 2024-07-06 204932
Annotation 2024-07-06 2049321920×563 40.4 KB

2

That’s not an error instead that’s a warning. This warning is caused when the renderer takes too long to render the scene. In your case, you are rendering too many spheres at once this is resource costly and draw calls count is too much.

3

Spheres-aside, Html element from drei is likely more expensive to update 200 times than your entire frame rendering. Consider using Html only for elements that 100% need it and that Html content will be visible for them - rendering 200 divs was not a good idea in DOM react, and remains not a good idea in r3f.

4

The program was like nah man that’s too much. I wonder how much time is he waiting for his scene to render.

5

so please how to render them more professional because I make like 100 bubble show data in the same time

6

yeah that’s the problem the scene sometimes render immediately and sometimes it need like 1 m so what is the steps to fix this please from your experience

7

You’d need to code a custom solution (or rely on quite very early stage uikit), as neither drei’s Html nor things like troika allow rendering a lot of 2D things at once. Either adjust the UI to not allow rendering 100 things at once (since that’s rarely readable either way), or render close-by bubbles as Html, while rendering the farther away ones as render-to-texture approximations.

8

thank you so much now I am trying to use uikit also it’s very important to my project to render the 100 spheres at once because it’s like this website principle but now I am facing a lot of problem with adjusting my code any way I will find make it work and thank you so so much