React
Apps in Hyperfy are built using the declarative power of React β But β instead of rendering to the DOM your app is being rendered into an automatic multiplayer virtual world. Instead of using DOM elements like <div>
and <p>
you have access to powerful new elements such as <model>
and <rigidbody>
.
Everything else is Just Reactβ’, with full access to component based design, hooks, context and the entire React and Javascript ecosystem.
Your apps index.js
file should export a default React component that will be used as the entry point for your app.
The following is a simple app that displays a large field of grass:
import React from "react";
export default function Grass() {
return (
<app>
<rigidbody>
<box size={[100, 0.1, 100]} color="green" />
</rigidbody>
</app>
);
}
Performanceβ
Thanks to React, Hyperfy is able to take full advantage of a virtual dom and only update things that need updating. On top of this, React can schedule complex tasks to happen later at a more optimal time. This is something no other engine can compete with.
One thing we must be careful with, is identifying when to jump into imperative code.
A perfect example of this is when animating objects each frame. Instead of thrashing React with state updates, it's best to do this outside of react state:
import React, { useRef, useEffect } from 'react'
import { useWorld, Vector3 } from 'hyperfy'
function MovingBox() {
const ref = useRef()
const world = useWorld()
useEffect(() => {
const box = ref.current
const position = new Vector3()
return world.onUpdate(delta => {
position.y += delta
box.setPosition(position)
})
}, [])
return (
<box ref={ref}>
)
}