flipbook icon indicating copy to clipboard operation
flipbook copied to clipboard

Changing controls resets component's state

Open adam-drake1 opened this issue 1 year ago • 2 comments

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

  1. 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,
}
  1. Click the button 5 times to set state.count to 5
  2. Toggle the isDisabled control, state.count will be 0

adam-drake1 avatar May 07 '23 17:05 adam-drake1

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;
}

Hexcede avatar May 13 '23 13:05 Hexcede

@vocksel bump for this as well; without this feature, controls cannot interop w/ Fusion animations at all.

frqstbite avatar Sep 11 '23 02:09 frqstbite