React Facet is a React library meant to provide performant state management for game UIs using web technologies.
The issue that React Facet aims to address is that vanilla React state management via props and
useState is not performant enough for the budget requirements of games, specially in slower devices. This is not typically a concern for React web applications, since there isn't an expectation that web applications will update on a fixed budget of frames per second, so the tooling around React is not already optimized for the game UI use case.
React Facet aims to address this issue by turning state management into a parallel mechanism to React's own state, to avoid the processing that causes the most cost in terms of performance. In particular:
- React Facet makes it possible to update leaf values in a React tree without triggering reconciliation. Mounting and unmounting is still costly, but updates to styles, text content and attributes of HTML elements are [significantly cheaper](citation needed) when reconciliation is bypassed.
Games have started integrating web engines into their platform to be able to make use of the talent pool and tooling already available for UI development. In particular, Coherent Lab's Gameface provides a web browser environment that can be directly integrated into a C++ codebase, with plugins to Unreal Engine and Unity. Other similar options are the Chromium Embedded Framework, Ultralight and Cobalt.
This means that not all features associated with end-user browsers are available in the environments where we intend React Facet to be primarily used. In turn, this means that the Custom Renderer and DOM Components target a subset of the DOM, the subset that it known to work well with Gameface and that we deem essential.
You can check the entire list of supported properties here