topic Widget renders twice (1.1 ExB Dev) in ArcGIS Experience Builder Questions

Widget renders twice (1.1 ExB Dev)

PhilLarkin1 — Sat, 11 Dec 2021 22:51:29 GMT

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 accidental side effects put into the render phase.

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?

Re: Widget renders twice (1.1 ExB Dev)

PhilLarkin1 — Tue, 22 Sep 2020 16:45:28 GMT

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

Re: Widget renders twice (1.1 ExB Dev)

DavidMartinez — Tue, 22 Sep 2020 20:15:18 GMT

Hi Phil,

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

David

Re: Widget renders twice (1.1 ExB Dev)

PhilLarkin1 — Tue, 22 Sep 2020 23:44:04 GMT

Thanks David, I appreciate it.

Re: Widget renders twice (1.1 ExB Dev)

JunshanLiu — Wed, 23 Sep 2020 01:23:06 GMT

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.

Re: Widget renders twice (1.1 ExB Dev)

PhilLarkin1 — Wed, 23 Sep 2020 17:24:32 GMT

Hi Junshan, thanks for your reply.

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

From a clean install, copy ..\client\your-extensions\widgets\simple
Paste to ..\client\dist\widgets
Launch builder and copy widget into Experience
Modify render or return functions to write to console. (console.log("test"))
Launch Experience and open Dev Tools console.
Click Simple Widget: console will show "test"
Close Simple Widget
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.

Re: Widget renders twice (1.1 ExB Dev)

MingyangHan — Thu, 24 Sep 2020 06:55:05 GMT

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.

Re: Widget renders twice (1.1 ExB Dev)

PhilLarkin1 — Thu, 24 Sep 2020 14:57:21 GMT

Great, thank you for your help.