1

is there a way to listen to the render event of a react component, once React compiled the code ?

Here is the context. I don't have access to the React source code, but only to the compiled code. I try to change the wording of a button, but my modification is obiously erased by rerender of the component.

Is there something like :

document.querySelector('#myButton').addEventListener('render', function(){})

Thank you all :)

PS: I'm awared that React isn't made to work like this, but I work threw an injected script from an external js solution.

Janus
  • 645
  • 2
  • 7
  • 18
  • So you need this because you want to change 3rd party react app after it renders? – HMR Jun 15 '20 at 08:26
  • yep, on each rerender of my button, i'd like to change the innerText of it. As the solution I use to inject my js code is implemented very soon in the page load, my code is executed sooner than the render of the button. That's why I need it :) – Janus Jun 15 '20 at 08:27

1 Answers1

1

If you don't have control over the React code you could listen for changes in the React container element. On render the children of your RenderDOM element changes. Further read: https://reactjs.org/docs/react-dom.html

If you are not on a old browser support MutationObserver might be also an option https://blog.sessionstack.com/how-javascript-works-tracking-changes-in-the-dom-using-mutationobserver-86adc7446401

sebastian-ruehmann
  • 483
  • 2
  • 12