Open code, practice, and notes →
Download source with English comments · for reading
22 · React+Three.js component design
Week 4 / original Day 22 · Document and example provided · This is a learning sequence, not a fixed daily workload.
Full roadmap · Workspace usage
Goal
Separate UI state from per-frame scene state and create an exercise contract.
Prerequisites
React state/ref/effect, 07 and 21.
Key concepts and explanations
React state can manage the selected exercise, input values, and error messages, while Three.js manages per-frame rotation and matrices. Separating responsibilities prevents UI updates from unnecessarily recreating the scene.
Keep the shared exercise contract minimal, such as mount/update/dispose. Move code to shared only after actual duplication appears. Tag asynchronous responses with a run identifier so that responses from a previous exercise cannot overwrite the current UI.
Skills you will develop
- Separate UI state from per-frame scene state and create an exercise contract.
- Reproduce the completion criteria below and answer the self-check questions in your own words.
Exercises
- Read the current app's menu, storage, and preview code and create a state ownership table.
- Define a minimal interface for connecting mesh and GS.
- Write a scenario that switches to B while A has a slow response, and ignore stale responses.
Variables to observe
Selected unit, run id, response order, UI input.
Completion criteria
- Explained state ownership and lifetime boundaries.
- Documented the exercise contract.
- Verified how late responses are handled.
Self-check questions
- Should all per-frame values be put in React state?
- What becomes difficult when code is abstracted before duplication exists?
Official references
Experiment notes — fill these in yourself
Goal
Key concepts
Changed variables and predictions
Actual results
What I learned
Remaining questions
Previous: GS viewer review and candidate comparison · Next: Loading UI and progress
Linked example and execution scope
Runnable source code · Workspace unit ID: 22-react-viewer
Edit the linked source code in Monaco to apply it to the sandbox preview after checks. Perform the extension exercises and completion criteria yourself and record the results.
Any previously saved code is preserved. To use the new original source, first back up everything as a full JSON file, then select Restore original code. Your notes are not erased.