reactumg-architecture

ReactUMG bridges React components to UE5 UMG widgets through a three-layer architecture: TypeScript layer, React reconciler, and C++ layer. The reconciler maps React's virtual DOM updates to native widget state changes, while Puerts handles TypeScript-to-C++ communication. This enables React's declarative UI patterns to control UMG widgets with automatic event binding and property synchronization.

The reconciler-hostConfig pattern separates React's update logic from platform-specific rendering. The hostConfig defines how React reconciler operations translate to UMG widget creation, property updates, and event handling. This decoupling lets React manage UI state while the hostConfig ensures changes sync to native UE5 widgets without tight coupling.

No. ReactUMG uses a minimal C++ surface of two classes and five functions, keeping most logic in TypeScript. Puerts bridges React components and TypeScript to C++, while the small C++ footprint handles core widget lifecycle and property binding. This design prioritizes performance and type safety without requiring deep C++ expertise.

ReactUMG automatically synchronizes React component lifecycle to UWidget lifecycle through the reconciler. Events from UMG widgets trigger React state updates via the hostConfig's event-binding layer, while React prop changes propagate back to widget properties. This bidirectional sync ensures consistent state across the React and UMG boundaries.

Yes. The TypeScript layer exposes native UWidget properties and event slots as React component props. This lets you declare UMG widgets using React's compositional model while maintaining full access to underlying UE5 widget capabilities, including slots for child widgets and all native properties.