You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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?
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.
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.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
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
Beta Was this translation helpful? Give feedback.
All reactions