Skip to content
Vesa Karvonen edited this page Jun 1, 2017 · 5 revisions

I’m getting a bunch of changing from uncontrolled input to controlled warnings when binding a value from an atom to a text input [...]

Make sure that the value of an input element is not undefined. IOW, make sure that the model data contains a value for the input or, for example, provide a default in some lens along the way to the control using e.g. L.valueOr("") or L.define("").

I’m getting an error Cannot update during an existing state transition (such as within render or another component's constructor) [...]

That can happen when you have side-effects in the body of a component function. When React mounts components, it calls the component functions. If those component functions then cause side-effects that cause other components to update, then you get that warning. This is fundamentally a React imposed limitation that makes sense with server side rendering.

Generally speaking, it should be ok to create state and mutate state before returning VDOM when the effects of that are not used outside of the component. If the effects are used outside of the component, then that might lead to VDOM updates during rendering (in other components). So, it is best to avoid mutating state outside the component during mounting. Instead of mutating things, consider using e.g. lenses with defaults to provide default values needed by controls.

If you really do need to trigger side-effects that may cause synchronous updates outside of the component, then, as a workaround, you can explicitly delay such side-effects so that they are not triggered synchronously.