r3f-fundamentals

Use the useFrame hook, which runs a callback every frame with state and delta time arguments. Mutate object properties via refs, such as meshRef.current.rotation.y += delta, to animate without triggering React re-renders.

Use the useThree hook with a selector, like useThree((state) => state.camera), to subscribe to specific state slices. Available state includes gl (renderer), scene, camera, pointer, clock, size, and viewport.

Yes, R3F provides React-style events on meshes including onClick, onPointerOver, onPointerOut, and onPointerMove. Event objects expose intersection data like point, distance, face, and uv, and support stopPropagation for bubbling control.

Call extend({ OrbitControls }) once at module level, then use the lowercase JSX element with args for constructor parameters. For TypeScript, declare the element in the JSX.IntrinsicElements interface.

Re-renders happen when new arrays or objects are passed as props each render or when useThree subscribes to the full state. Fix this by mutating refs inside useFrame, memoizing props with useMemo, and using selective state subscriptions.

Install leva and use the useControls hook to bind sliders, colors, and booleans to scene properties. It supports folders, buttons for actions, monitors for read-only values, and can be hidden in production via the Leva component's hidden prop.