Widget renders twice (1.1 ExB Dev)

700
7
Jump to solution
09-14-2020 11:50 AM
PhilLarkin1
Regular Contributor

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? 

0 Kudos
1 Solution

Accepted Solutions
MingyangHan
New Contributor

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.

View solution in original post

0 Kudos
7 Replies
PhilLarkin1
Regular Contributor

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‌ ?

0 Kudos
DavidMartinez
Esri Regular Contributor

Hi Phil,

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

David

0 Kudos
PhilLarkin1
Regular Contributor

Thanks David, I appreciate it. 

0 Kudos
JunshanLiu
Occasional Contributor III

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.

0 Kudos
PhilLarkin1
Regular Contributor

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. 

0 Kudos
MingyangHan
New Contributor

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.

0 Kudos
PhilLarkin1
Regular Contributor

Great, thank you for your help. 

0 Kudos