Typorithm · hard

useFrame Animation

r3f-useframereactuseframeanimationref

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn useFrame Animation

Three.js & R3F

useFrame registers a callback that runs every rendered frame in the R3F render loop. delta is the seconds since the last frame — multiply by it for frame-rate-independent motion. You mutate the object through a ref instead of setState, avoiding a re-render per frame, and it only works inside a <Canvas>.

useFrame is R3F's hook into the render loop: the callback you pass runs once per rendered frame. Its first arg is the frame state and its second is delta, the seconds elapsed since the previous frame.

Animating with setState would re-render the component 60 times a second. Instead you grab the object through a useRef and mutate it directly — ref.current.rotation.y += delta — which React never re-renders.

Multiplying by delta makes motion frame-rate-independent: on a slow or fast display the object still rotates at the same real-world speed. useFrame only works for components rendered inside a <Canvas>.

useFrame runs its callback every rendered frame.

delta is seconds since the last frame — multiply for steady motion.

Mutate via a ref, not setState, to avoid re-renders.

import { useFrame } from "@react-three/fiber";
import { useRef } from "react";

function Spinner() {
  const ref = useRef<THREE.Mesh>(null);
  useFrame((state, delta) => {
    ref.current!.rotation.y += delta;
  });
  return <mesh ref={ref} />;
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Import useFrame

useFrame is the R3F hook that registers a callback into the render loop.

import { useFrame } from "@react-three/fiber";

2. Mesh ref

A ref holds the live THREE.Mesh so you can mutate it without re-rendering.

const ref = useRef<THREE.Mesh>(null);

3. Per-frame callback

The callback runs every rendered frame; state and delta describe the frame.

useFrame((state, delta) => {

4. Frame-rate-safe motion

Multiplying by delta makes rotation speed independent of frame rate.

ref.current!.rotation.y += delta;

5. Attach the ref

ref={ref} wires the JSX mesh to the ref so the callback can mutate it.

return <mesh ref={ref} />;

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.