Advantages and disadvantages of react-three-fiber

Is there a fundamental difference between using react-three-fiber and three-js + react separately?
what are the advantages and disadvantages of using one option over the other?

the docs go into this, specifically the first segments GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js

check out the examples to get some idea where the potential is.

if you need a quick overview,

  • less code, focus more on composition
  • performant by default
  • memory efficient, auto-disposes, re-use and caching everywhere
  • pointer events inbuilt, bubbling, stoppropagation and capture
  • the only eco system that threejs has (other than examples, gists, snippets and dispersed libraries)

using react with three separately makes little sense, you’d pit a declarative world against a imperative. you loose all integration, state, context, suspense, the eco system. it would be similar to constructing the UI with querySelectors and appendChild.

ps, here’s a technical breakdown of how it works, fiber is a renderer like react-dom, it is not a wrapper or binding.