React: Calling handleChange/addItem/removeItems in an async callback

Hi @pranav-kunapuli,

I think we run into issues here with JSON Forms hybrid approach to support “controlled” and “uncontrolled” behavior at the same time.

You can check whether that is the case by stabilizing the data prop. Just hand over the initial data as a stable object and do not update it with the new data from JSON Forms, like this:

const [runtimeData, setRuntimeData] = useState({});
const [initialData] = useState(runtimeData);
// ...
<JsonForms {...otherProps} data={initialData} onChange={(event) => setRuntimeData(event.data)} />

If the problem goes away, then this is the culprit.

If you never need to update the data from outside JSON Forms then you can use this workaround to solve the issue. If you need to adapt it during the lifetime of the form, then using the new middleware functionality you can convert JSON Forms into a fully controllable component and the issue will be solved too.

Can you verify whether stabilizing the data works for you?