R3F vs Vanilla Three.js (2026): Which Should You Pick?

The question "Should I use React Three Fiber or vanilla Three.js?" comes up on Three.js Discourse every few weeks. The honest answer is short: if you already use React, use R3F. The longer answer is when the rule flips.

# TL;DR

• Default to R3F if you use React. Declarative, idiomatic, ecosystem (Drei + Leva + Rapier) is mature.
• Default to vanilla Three.js if you don't use React. No reason to bring React in just for the renderer.
• Flip the rule when: you need extreme perf, custom render loops, or unusual shader pipelines — vanilla Three.js gives more control.

# Why R3F wins for React projects

Three.js objects mounted via JSX integrate cleanly with the rest of your app. State is shared with Zustand or Redux. Components dispose cleanly on unmount. Drei provides battle-tested helpers (, , ) that you'd otherwise hand-roll.

Same scene, vanilla:

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshStandardMaterial({ color: '#7c5cff' })
)
scene.add(cube)
// remember to .dispose() everything on unmount

R3F:

<mesh>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="#7c5cff" />
</mesh>

R3F handles the disposal, the scheduling, and React's unmount lifecycle for you.

# Where vanilla still wins

Custom render loops. R3F's useFrame is convenient but adds a small overhead. If you need pixel-perfect 144Hz on Quest 3, vanilla is the safer ceiling.

Unusual shader pipelines. Multi-pass post-processing with custom render targets is doable in R3F but easier in vanilla.

Library boundaries. If you're building a Three.js library other people will use without React, ship vanilla. R3F is a renderer, not the engine.

# What the AI layer does

Yugma is built on R3F, and the AI Director operates a Zustand scene store through 19 typed tool calls. The pattern works because R3F's declarative model maps cleanly to "the AI mutates state, React reconciles, Three.js renders".

If you're hand-rolling vanilla Three.js with an AI layer, you'll end up reinventing scene-graph CRUD that R3F gives you for free. So: AI 3D + React → R3F. AI 3D + non-React → still doable, but more plumbing.

Read the Yugma vs Three.js comparison →