Boilerplate widgets (Simple, Editor) are called twice. According to various write ups this is due to React.StrictMode and is expected.
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?
Solved! Go to 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.
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 ?
Hi Phil,
Thanks for letting us know. We are looking into this now.
David
Thanks David, I appreciate it.
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.
Hi Junshan, thanks for your reply.
For clarity I'd like to share how this can be replicated:
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.
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.
Great, thank you for your help.