[BUG] FormBuilder is rendered 2 times on initialization

[e-gauthier]

Environment

Please provide as many details as you can:

• Hosting type
  • [] Form.io
  • [x ] Local deployment
    • Version: 5.2.3
• Formio.js version: 4.14.8
• Frontend framework: React
• Browser: Chrome/Edge
• Browser version: Latest

Steps to Reproduce

1. Create an app with CRA.
2. Add the component FormBuilder with a Builder class.
3. Add a console.log inside the constructor of the class Builder.

Observed behavior

Console.log is called 2 times.

Expected behavior

Console.log should be called only one time.

Example

Click on this codesandbox.io link to see the behavior : https://codesandbox.io/s/react-formio-forked-443yep?file=/src/index.js

The component FormBuilder call initializeBuilder if the prop Form change. This is expected. But, builderRef pass from undefined to a new value, inside initializeBuilder, so the useLayoutEffect is called and destroy the form and recreate it.

Is a condition missing in the useLayoutEffect to not destroy the form if previously created?

[elias-soykat]

@e-gauthier Your codesandbox does not work.

[e-gauthier]

@e-gauthier Your codesandbox does not work.

You can try again. I restored the sandbox.