react-three-fiber

Use React Three Fiber's Canvas component as the root, then declare meshes, geometries, materials, and lights as JSX children. Props like position, rotation, and args map directly to Three.js object properties and constructor arguments.

Use the useFrame hook with a ref to mutate object properties each frame, such as rotation or position. Never call setState inside useFrame, since it triggers React re-renders every frame and hurts performance.

Use useLoader with GLTFLoader or Drei's useGLTF hook, wrapped in a Suspense boundary for async loading. Assets are cached automatically, and you can preload them with useGLTF.preload before components mount.

Yes, R3F works with React frameworks including Next.js, Gatsby, and Remix, and provides full TypeScript support via ThreeElements types. The component generator script can emit TypeScript boilerplate with typed props interfaces.

Common causes include calling setState inside useFrame, creating new Three.js objects in render instead of using arrays or useMemo, and subscribing to all state with useThree instead of selective selectors. Use instancing, frameloop="demand", and AdaptiveDpr for further optimization.

Choose R3F when building 3D inside React applications where you need hooks, state management, and reusable component abstractions. Plain Three.js fits better for non-React projects or when you need direct imperative control without a reconciler.