OSS TanbouOn this page
Overview
React Three Fiber is a renderer that connects Three.js to React's reconciliation model. Inside Canvas, meshes, lights, geometry, and materials are declared as JSX while React state, hooks, and component composition drive 3D scenes. It provides a React foundation for the Three.js ecosystem rather than replacing Three.js itself.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Declare Three.js objects as JSX elements
JSX such as <mesh>, <boxGeometry>, and <meshStandardMaterial> maps to corresponding Three.js objects, allowing scene graphs to be composed as React components.
Sources: [1]
Integrate React state, events, and useFrame with the 3D render loop
Components can use React state and pointer events while useFrame registers per-frame work, keeping UI logic and 3D behavior in the same component model.
Sources: [1]
Combine Three.js features with the wider React Three Fiber ecosystem
Because the renderer expresses Three.js objects, new Three.js capabilities remain available through JSX, while related projects provide helpers, post-processing, XR, and other integrations.
Sources: [1]
Best fit
Fits React applications that componentize interactive 3D, visualization, and WebGL scenes
It is useful when teams want React state management and component composition to drive Three.js rendering inside the same application architecture.
Sources: [1]
Before adoption
Version 9.8.1 requires React 19 and Three.js 0.156 or later
Package metadata requires React and React DOM >=19 <19.4 and Three.js >=0.156. The README also explicitly pairs React Three Fiber v9 with React 19.
Version 9.8.1 fixes Canvas lifecycle and React Activity visibility behavior
The release fixes renderer disposal on Canvas unmount, visibility across React Activity and Suspense boundaries, and runtime settings being reset by some Canvas rerenders.
Sources: [3]
Official sources
- [1]React Three Fiber v9.8.1 README(2026-10-05)
- [2]@react-three/fiber 9.8.1 package metadata(2026-10-05)
- [3]React Three Fiber v9.8.1 release(2026-10-05)
- [4]React Three Fiber MIT license(2026-10-05)
Supplemental curator note
React Three Fiber is a React renderer rather than an abstraction that replaces Three.js knowledge. Version 9 is paired with React 19 and still relies on core Three.js concepts.
Try it in 3 steps
- 1
Install pinned React Three Fiber 9.8.1
Create an isolated npm project with R3F, React 19, and Three.js pinned.
demo=$(mktemp -d "${TMPDIR:-/tmp}/r3f.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @react-three/fiber@9.8.1 react@19.2.0 react-dom@19.2.0 three@0.180.0 - 2
Verify the package version
Require the installed renderer package to match the reviewed version.
test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/@react-three/fiber/package.json')).version)")" = '9.8.1' - 3
Check the renderer API exports
Verify Canvas, createRoot, and useFrame exports without starting a browser or WebGL context. Validate rendering separately in a browser/GPU environment.
test "$(node --input-type=module -e "import * as R from '@react-three/fiber'; console.log(['Canvas','createRoot','useFrame'].every(k=>k in R))")" = 'true'
Growth
Growth trends · Last 30 days
32,733 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 36
- Open PRs
- 3
Development activity is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- react
- threejs
- fiber
- renderer
- 3d
- animation
- Stars
- 32,733
- Forks
- 2,005
- Watchers
- 215
- Open issues
- 13
- Contributors
- 226
- Owner type
- Organization
- Primary language
- TypeScript
- License
- MIT
- Repository last updated
- Oct 2, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- visx21,075 Stars
3 shared tag(s) · Same language
low-level visualization components that combine D3 calculations with React component composition for custom charts
TypeScript - React Router56,590 Stars
3 shared tag(s) · 1 shared category(s) · Same language
multi-strategy routing for URLs, nested routes, navigation, and data flow in React applications
TypeScript - styled-components41,099 Stars
3 shared tag(s) · 1 shared category(s) · Same language
CSS-in-JS for React using tagged templates with scoped styles, theming, SSR, and React Native support
TypeScript - Floating UI32,756 Stars
3 shared tag(s) · 1 shared category(s) · Same language
low-level positioning and interaction primitives for tooltips, popovers, dropdowns, and other floating elements
TypeScript - Headless UI28,767 Stars
3 shared tag(s) · 1 shared category(s) · Same language
unstyled accessible UI components for React and Vue that supply interaction behavior while leaving visual design to the app
TypeScript - Babylon.js26,126 Stars
3 shared tag(s) · 1 shared category(s) · Same language
render interactive 3D scenes, games, and XR experiences in browsers through TypeScript or JavaScript with WebGL and WebGPU
TypeScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.