Description
React Three Fiber, R3F for short, embeds the JavaScript 3D library Three.js as a React renderer. Instead of building scenes imperatively through the Three.js API, they are written declaratively in JSX: a <mesh> turns internally into new THREE.Mesh(), and every Three.js object can be expressed as a self-contained, reusable React component that reacts to state and can respond interactively to clicks or hover. The components render outside the React DOM directly into the WebGL context, so hooks such as useFrame for the render loop or useRef for direct access to the underlying Three.js object are available.
A prerequisite is familiarity with React and with the basic concepts of Three.js, namely scene, camera, mesh, geometry, and material, since R3F adopts these concepts unchanged instead of simplifying them. The library follows a specific React major version each time: version 8 of @react-three/fiber is paired with React 18, version 9 with React 19. Alongside the web entry point, a separate path exists for React Native through Expo, using the same JSX concepts but its own import from @react-three/fiber/native.
Compared to working directly with Three.js, R3F claims to give up no functionality and to add no measurable overhead, because components render outside of React's own rendering; new Three.js features are available immediately, without R3F itself needing to be updated. Within a toolkit for WebGL and shader effects, R3F is the foundation layer that higher-level, ready-made effect libraries such as animated gradient backgrounds build on. For ready-made effects without writing custom 3D code, such higher-level libraries are often the faster route; for custom 3D scenes and custom shaders, React Three Fiber remains the base.
