Is it possible to listen a React render of a component after compilation (in browser console for example)?

Question

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.

Answer 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