flipbook
flipbook copied to clipboard
Changing controls resets component's state
Describe the bug
Changing control values causes component's state to be reset
Expected behavior
The component should be re-rendered with different props rather then creating the component again from scratch
Steps to reproduce
- Run the following story:
local ClickCounter = Roact.Component:extend("ClickCounter")
function ClickCounter:init()
self:setState({ count = 0 })
end
function ClickCounter:render()
return Roact.createElement("TextButton", {
Text = `Count: {self.state.count}`,
Size = UDim2.fromOffset(75, 35),
[Roact.Event.Activated] = function()
if (self.props.isDisabled) then return end
self:setState(function(state)
return {
count = state.count + 1
}
end)
end
})
end
return {
summary = "The button's state is reset when the controls are toggled",
controls = { isDisabled = false },
story = function(props)
return Roact.createElement(ClickCounter, props.controls)
end,
}
- Click the button 5 times to set state.count to 5
- Toggle the isDisabled control, state.count will be 0
I feel like it would fix a lot of problems if controls were designed in a way where users could define their own update behaviours. Because, currently there is no signalling behaviour at all which makes it impossible to support controls for anything except manually for a limited number of frameworks.
For example:
local isDisabled = Value(false) -- Fusion
return {
summary = "Example",
controls = {
isDisabled = {
type = "boolean";
update = function(newValue)
isDisabled:set(newValue)
end;
}
};
story = function(props)
-- only called once
end;
}
@vocksel bump for this as well; without this feature, controls cannot interop w/ Fusion animations at all.