Hooks outside the Canvas
The first ShowSize is outside the Canvas and throws. React also prints its own error report; only the caught: line is yours.
Inside <Canvas>, each lowercase tag makes a three.js object. Constructor arguments go in args, nested properties use dashes (position-x), a ref gives you the real object, and R3F hooks only work inside the Canvas.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write JSX for a group named wheelset holding two meshes at x = -0.55 and x = 0.58 (both y = 0.35), using one geometry each.
Make a small error boundary that logs an R3F hook error, and put a hook-using component inside and outside a Canvas to test it.
Explain it without notes
Why can't you read ref.current.geometry in the body of a component?
A scene animates a box's width by changing args every frame. What goes wrong and what should it do instead?
Console
Nothing logged yet.Expected console output
Error: R3F: Hooks can only be used within the Canvas component!
The above error occurred in the <ShowSize> component.
React will try to recreate this component tree from scratch using the error boundary you provided, Catch.
caught: R3F: Hooks can only be used within the Canvas component!
THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.