Updating Roact properties at runtime

Help and Feedback Scripting Support
#1

how do I update a roact component at runtime through properties

I want my UI Manager script to display the amount of assets that are being loaded

I tried using binding but that doesn’t work in the component or outside of the component but they both just disconnect till you call Roact.update() on them

I can’t use state cause its like a private only value that cannot be changed outside the class

I haven’t tried context because I don’t want to have to make another component and get the same issue sending down props to update at runtime

heres my
UI Manager script:

local val, setVal = Roact.createBinding(0)

local AssetsLoading = Roact.createElement(require(comps:WaitForChild("AssetsLoading")), { title = "GameLoading", status_percent = val:getValue() }, nil)

local AssetsLoadingTree = Roact.mount(AssetsLoading, plrUI, "AssetsLoadingTree")


task.wait(3)
setVal(500) -- This binding just for testing btw

AssetsLoading ModuleScript:

local Roact = require(script.Parent.Parent.Parent:WaitForChild("vendor"):WaitForChild("Roact"))

local AssetsLoading = Roact.Component:extend("AssetsLoading")
local LoadingDot    = require(script.Parent:WaitForChild("LoadingDot"))

function AssetsLoading:init()
	self:setState({
		status_percent = self.props.status_percent or 0,
		status = self.props.status or "Loading Async",
		test_state = 90
	})
end

function AssetsLoading:render()
	return Roact.createElement("ScreenGui", {
		IgnoreGuiInset = true,
		
	}, {
		Background = Roact.createElement("Frame", {
			Size = UDim2.fromScale(1, 1),
			BackgroundColor3 = Color3.new(0, 0, 0),
		}, {
			Padding = Roact.createElement("UIPadding", {
				PaddingRight  = UDim.new(0.05, 0),
				PaddingBottom = UDim.new(0.035, 0),
				PaddingLeft   = UDim.new(0.05, 0)
			}),
			
			assetsLoading = Roact.createElement("TextLabel", {
				Size = UDim2.fromScale(1, 1),
				BackgroundTransparency = 1,
				RichText = true,
				Text = `<font size=\"15\" weight=\"Bold\" transparency=\".65\">({self.state.status_percent}%) <font transparency=\".75\">{self.state.status}</font></font><br><font size=\"50\" weight=\"ExtraBold\"><uc>{self.props.title}</uc></font></br>`,
				TextXAlignment = Enum.TextXAlignment.Left,
				TextYAlignment = Enum.TextYAlignment.Bottom,
				Font = Enum.Font.SourceSans,
				TextWrapped = false,
				TextTransparency = 0,
				TextColor3 = Color3.new(1, 1, 1)
			}),
			
			LoadingDot = Roact.createElement(LoadingDot, {
				size = UDim2.fromOffset(30, 30),
				dot_min_size = .35,
				dot_max_size = .75,
				
				tween_time   = 1,
				
				background_color = Color3.new(1, 1, 1),
				foreground_color = Color3.new(0, 0, 0),
				
				pos = UDim2.new(1, 0, 1, 0),
				anchor_point = Vector2.new(0, 1)
			})
		}),
	})
end

return AssetsLoading