Show HN: A community built open source racing game made in React
twitter.com1 pointsby mlsarecmg0 comments
const ref = useRef()
useEffect(() => console.log(ref), [])
return <div ref={ref} />
const ref = useRef()
useEffect(() => console.log(ref), [])
return <mesh ref={ref} />
async function test() {
const chars = `!"§$%&/()=?*#<>-_.:,;+0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
const font = await new Promise((res) => new THREE.FontLoader().load("https://raw.githubusercontent.com/drcmda/scheduler-test/master/public/Inter%20UI_Bold.json", res))
console.time("test")
for (let i = 0; i < 510; i++) {
new THREE.TextGeometry(chars[Math.floor(Math.random() * chars.length)], {
font,
size: 1,
height: 0.5,
curveSegments: 80,
bevelEnabled: false,
})
}
console.timeEnd("test")
}
test()
// To really drive it home you'd have to repeat it every two seconds ...
// setInterval(test, 2000)
In Fiber to animate is to use useFrame, which happens to be outside of React and bears no extra cost or overhead, nor does it conflict with reactive prop updates. useFrame allows any individual component to tie its mutations into the render loop.
The reactivity debate is next to irrelevant in WebGL because that is a loop driven system, it is not event-driven like the DOM. If you doubt that observe Svelte/Threlte, which can update the view directly, yet relies on useFrame modeled after Fibers. That is because you need deltas (to be refresh-rate independent), flags (needsUpdate), imperative functions (updateProjectionMatrix etc), it is never just a prop update.
That said, i don't know much about React-Pixi/Konva and so on, and if these do not have a loop outlet then yes i agree. But the whole premise of that article just falls flat.