useFrame registers a callback that runs before (or after) every rendered frame — the place for animations and per-frame updates.
Signature
function useFrame( callback: (context: Context, delta: number, frame?: XRFrame) => void, options?: { priority?: number; stage?: "before" | "after" },): () => voidRegister a callback and get back a cleanup that unregisters it.
Parameters
| Parameter | Type | Description |
|---|---|---|
callback | (context: Context, delta: number, frame?: XRFrame) => void | Runs each frame. context is the three.js context, delta is seconds since the last frame, and frame is the XRFrame during WebXR sessions. |
options (optional) | { priority?: number; stage?: "before" | "after" } | priority orders callbacks — lower runs first (default 0). stage runs the callback "before" (default) or "after" the render. |
Returns
A cleanup function (() => void) that unregisters the callback. Solid calls it automatically when the owning component unmounts; call it yourself to detach the listener earlier.
Usage
let mesh: Mesh | undefined
// Run before render, with high priorityuseFrame( (context, delta) => { if (!mesh) return mesh.position.x = Math.sin(delta) * 2 }, { priority: -1 },)
// Run after render, with lower priorityuseFrame(() => console.info("Frame rendered"), { stage: "after", priority: 10 })See also
Last updated: 6/8/26, 11:20 AM