onEnterDOM or onBeforeRendering for custom webcomponent

[akshilverma]

Hi,

I have created a custom webcomponent package using ui5-webcomponents documentation. I have a scenario where I pass some data in an event and this data can be passed back to the custom component when rendering it. I am reading this data in the onEnterDOM lifecycle hook of the webcomponent.

When the webcomponent is consumed in a React app, this seems to work fine. But when I am trying to consume the webcomponent in Angular, the data is not getting updated in the onEnterDOM hook. If I change my logic to run in the onBeforeRendering, the data is updated.

My doubt is which of the lifecycle hooks is the correct way of reading passed data?

Best regards,
Akshil Verma

[ilhan007]

Hello @akshilverma
onEnterDOM is executed only once while onBeforeRendering every time the component's state is changed and the component is about to be re-rendered.

onBeforeRendering

Use onBeforeRendering to prepare any state to be used in the .hbs template, e.g anything rendering-related and anything related to the state.

When to use:

• prepare calculated (derived) state for use in the renderer

When not to use:

• do not try to access the DOM (use onAfterRendering instead)

onEnterDOM

onEnterDOM is completely independent of the component’s rendering lifecycle, and it's solely related to its insertion of the component into the DOM. It's called once when the component is appended to the DOM. If later-on the component is removed from the DOM, onExitDOM is called and if the component is appended back again - onEnterDOM is called again and so on.

Learn

Read more for the lifecycle hooks here: https://sap.github.io/ui5-webcomponents/playground/development/deep-dive-and-best-practices/#lifecycle

Conclusion

From what I have read in your description, it seems in your React app, React mounts and unmounts the DOM of the view every time you need the data you pass - the mount/unmount (append/removal) of the DOM triggers onEnterDOM, onExitDOM. And, in your Angular app the DOM is not inserted/removed so often and onEnterDOM/onExitDOM are not triggered.

I suggest using onBeforeRendering for your use-case.

BR,
ilhan
UI5 Web Components team