Attaching an event listener to componentDidUpdate in react

Question

I am writing a react web application that dynamically renders more data based on scroll position of a window frame to improve initial loading time. My problem is that I need to know when the additional data is completely done updating so i can call an external function that keeps track of the scroll position of DOM elements that have been newly rendered

the external function pseudo code can be seen below

this.renderAdditionalData(child); //Once the child has actually displayed all of the additional data(DOM elements updated) new Promise((res, rej) =>{ child.mapNewLines(res);//this method calls res after all the processing has finished }).then(() =>{this.doSomethingWithNewData(foo);});

How would I go about starting this promise after the data has been updated on the screen because mapNewLines uses the newly rendered data's DOM properties

Could you complement your pseudo code with the code you have written so far? — Tholle
– Tholle, Commented Jul 12, 2018 at 1:00

Juan · Accepted Answer · 2018-07-17 21:35:49Z

Instead of using a promise, you would emit an event an event in componentDidUpdate (a method in react) so that you would know when new items were rendered on the page since componentDidUpdate is run after a render and DOM properties update. You would then attach an eventListener to listen for when the rendering of more data is done to trigger the mapNewLines. Then you would attach the dosomethingwithNewData as a callback to the mapNewLines function.

let callback = (this.doSomethingWithNewData.bind(this, timestamp, element)); window.addEventListener('mapped', () => {element.mapNewLines(callback);}); this.renderAdditionalData(child);

where window is wherever you want to dispatch the event from.

Collectives™ on Stack Overflow

Attaching an event listener to componentDidUpdate in react

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related