When using formio/react inside a component, every time the parent component change, formio/react is destroyed and recreated.

Environment

React-formio version: “5.0.0-rc1” (Possibly all versions) Formio.js version: “4.12.7” Frontend framework: React “16.14.0” Frontend framework: React-Dom “16.14.0” Browser: many browsers. Browser version: many browser versions.

Context

Our software need to save the schema of formio in a database along with other information about a specific entity. The schema can also be altered by an editor. Ex: Updating a label text without the need to use formio. So, react-formio is embed inside a component called FormioWrapper. Finally, this component is used inside EditEntityComponent with a save button. Each time there is a change in EditEntityComponent props/states, formio reset itself.

Steps to Reproduce

1. Go to https://codesandbox.io/s/cra-react-formio-forked-esi5m?file=/src/index.js
2. Click on Advanced tab to open it.
3. Delete, add or move a text box.

Observed behavior

Formio reset itself by closing the Advanced tab, the actual state is lost.

Expected behavior

Formio don’t have to reset itself every time a modification is triggered.

Where to look

After investigation, we found that this block of code is what cause the situation.

src/components/FormBuilder.jsx line 56 to 59

  useEffect(() => {
    initializeBuilder(props);
    return () => builder ? builder.instance.destroy(true) : null;
  }, [props.form.display, props.form.components, props.options]);

Why do the component need to destroy itself every time a change is triggered? Is there a limitation that avoid the component to stop destroying itself?

[mp3three]

https://github.com/formio/react/pull/389

[mp3three]

This is now associated with a ticket in our system to look into further - FIO-2660