❌ You cannot expect something like this to work:
import { useThree } from '@react-three/fiber'

function App() {
  const { size } = useThree() // This will just crash
  return (
    <Canvas>
      <mesh>

✅ Do this instead:
function Foo() {
  const { size } = useThree()
  ...
}

function App() {
  return (
    <Canvas>
      <Foo />

import { useThree } from '@react-three/fiber'

function Foo() {
  const state = useThree()

// Will only trigger re-render when the default camera is exchanged
const camera = useThree((state) => state.camera);
// Will only re-render on resize changes
const viewport = useThree((state) => state.viewport);
// ❌ You cannot expect reactivity from three.js internals!
const zoom = useThree((state) => state.camera.zoom);

function Foo() {
  const get = useThree((state) => state.get)
  ...
  get() // Get fresh state from anywhere you want

function Foo() {
  const set = useThree((state) => state.set)
  ...
  useEffect(() => {
    set({ camera: new THREE.OrthographicCamera(...) })
  }, [])

import { useFrame } from '@react-three/fiber'

function Foo() {
  useFrame((state, delta, xrFrame) => {
    // This function runs at the native refresh rate inside of a shared render-loop
  })

function Render() {
  // Takes over the render-loop, the user has the responsibility to render
  useFrame(({ gl, scene, camera }) => {
    gl.render(scene, camera)
  }, 1)

function RenderOnTop() {
  // This will execute *after* Render's useframe
  useFrame(({ gl, ... }) => {
    gl.render(...)
  }, 2)

function A() {
  // This will execute first
  useFrame(() => ..., -2)

function B() {
  // This useFrame will execute *after* A's
  useFrame(() => ..., -1)

import { Suspense } from "react";
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

function Model() {
  const result = useLoader(GLTFLoader, "/model.glb");
  // You don't need to check for the presence of the result, when we're here
  // the result is guaranteed to be present since useLoader suspends the component
  return <primitive object={result.scene} />;
}

function App() {
  return (
    <Suspense fallback={<FallbackComponent /> /* or null */}>
      <Model />
    </Suspense>
  );
}

import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

useLoader(GLTFLoader, url, (loader) => {
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/draco-gltf/");
  loader.setDRACOLoader(dracoLoader);
});

const [bumpMap, specMap, normalMap] = useLoader(TextureLoader, [
  url1,
  url2,
  url2,
]);

useLoader(loader, url, extensions, (xhr) => {
  console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
});

const { nodes, material } = useLoader(GLTFLoader, url);

useLoader.preload(GLTFLoader, "/model.glb" /* extensions */);

import { useLoader, useGraph } from "@react-three/fiber";

function Model(url) {
  const scene = useLoader(OBJLoader, url);
  const { nodes, materials } = useGraph(scene);
  return <mesh geometry={nodes.robot.geometry} material={materials.metal} />;
}