1) Make a node once, reuse it

Don’t rebuild nodes every render. Make them once (useMemo etc.) and pass them around.

Code above uses color, sin, time, positionLocal TSL nodes.

2) Keep never-changing stuff at module top

If a value never changes, put it in module scope so every component shares it.

3) Only render when something changes (+ cap DPR)

With R3F, use frameloop="demand" and set dpr={[1,2]} to avoid wasting work on high‑DPI screens.

On raw Three, pause with renderer.setAnimationLoop(null) and resume only when you need it.

4) Nudge values with uniforms, not new nodes

Update uniforms (time, sliders) each frame. Rebuilding materials or node graphs is overkill.

5) Clean up when things go away

Dispose geometries/materials and stop the loop on unmount. Leaking GPU memory will bite later.

6) Quick ways to spot slow parts

Usual suspects: too many renders, too many node creations, wild DPR. Use DevTools + console.time to measure.