Using React to Build Performant Game UIs in Minecraft
summary
Uses React but skips React reconciliation by introducing facets lightweight observables that flow from the C++ game engine into a custom renderer (react-facet-dom-fiber) so DOM props can be facets instead of unpacked state. Implemented remote sync, use_remote_facet and use_facet_map, and fast div/span host components. Result: massive speedups — 32% of the time on Xbox One for simple updates and down to 12% for big lists, and the system ships (achievement screen rolled out in production for Minecraft Bedrock Edition).
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:20Why Web Standards
- 2:45GameFace
- 3:45Performance
- 4:08State Management
- 6:57Global Store
- 7:17Javascript Ecosystem
- 8:07Defining the facets
- 10:58Handling performance
- 11:57Updating text nodes
- 16:03Customizing the progress bar
- 18:20Performance comparison
- 20:29GitHub repository
- 21:48Summary
- 22:08Packages
- 22:31DOM Components
- 22:58Outro
related talks
21mBreaking out of the confines: making games in React
25mReact For Game Development
35mGamedev on React + WebGL
51mFunctional Web Development – An Introduction to React.js
18mReact and WebGL
20mReconciliation: The Root of Performant Applications
22mMultiplayer Experiences with React
36mReact and the Art of Gamification