Widget renders twice (1.1 ExB Dev)

[PhilLarkin1]

Boilerplate widgets (Simple, Editor) are called twice. According to various write ups this is due to React.StrictMode and is expected.

It's an intentional feature of the StrictMode. This only happens in development, and helps find acci...

I'd expect this shouldn't happen in a published app, but it does. Here is a raw copy of the Simple widget. "here" hits the console twice in a published app. 

  render() {
    return (
      <div className="widget-demo jimu-widget m-2">
        <p>Simple Widget</p>
            <p>exampleConfigProperty: {this.props.config.exampleConfigProperty}</p>
            {console.log("here")}
      </div>
    );
  }‍‍‍‍‍‍‍‍‍

Is this a bug? If not, how might I avoid my widget rendering twice? 

[PhilLarkin1]

Would someone from the Experience Builder team please chime in here? This is easy to replicate. Since this issue is present in the broader React community it seems a simple workaround might be available.  David Martinez‌ , Jianxia Song‌ ?

[DavidMartinez]

Hi Phil,

Thanks for letting us know. We are looking into this now.

David

[PhilLarkin1]

Thanks David, I appreciate it. 

[JunshanLiu]

Hi Phil,

We don't use StrictMode and I don't see multiple times render if you modify the state.

The reason why you see multiple times render I think is: Widget is injected some props (you can see it from this.props), so if any prop change, the widget will re-render.

[PhilLarkin1]

Hi Junshan, thanks for your reply. 

For clarity I'd like to share how this can be replicated: 

1. From a clean install, copy ..\client\your-extensions\widgets\simple
2. Paste to ..\client\dist\widgets
3. Launch builder and copy widget into Experience
4. Modify render or return functions to write to console. (console.log("test"))
5. Launch Experience and open Dev Tools console. 
6. Click Simple Widget: console will show "test"
7. Close Simple Widget
8. Open Simple Widget: console will show "test" twice.

Is there any way I can avoid this behavior? You mention that when a prop changes this will cause the widget to re-render. In this example I am not changing state or props and yet after the initial load of the widget it is rendered twice. 

[MingyangHan · Accepted solution]

Hi Phil,

I tested it with version 1.1:

If you add the simple widget to a controller widget, and when you open the simple widget the second time (not the first time), render is actually executed twice.

This bug has been fixed in the latest version.

[PhilLarkin1]

Great, thank you for your help.