nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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 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.

  <SPAN class="token function">render</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">(</SPAN>
      <SPAN class="operator token"><</SPAN>div className<SPAN class="operator token">=</SPAN><SPAN class="string token">"widget-demo jimu-widget m-2"</SPAN><SPAN class="operator token">></SPAN>
        <SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN>Simple Widget<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN>
            <SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN>exampleConfigProperty<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>props<SPAN class="punctuation token">.</SPAN>config<SPAN class="punctuation token">.</SPAN>exampleConfigProperty<SPAN class="punctuation token">}</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN>
            <SPAN class="punctuation token">{</SPAN>console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"here"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">}</SPAN>
      <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
    <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Encuentra más publicaciones etiquetadas con

Accepted answers

MingyangHan

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.

All comments

PhilLarkin1

Great, thank you for your help.

MingyangHan

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

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.

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

Thanks David, I appreciate it.

DavidMartinez

Hi Phil,

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

David

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

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.