Suppose we have the following simple class-based React component:

const e = React.createElement;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            clicked: false
        };
    }
    render() {
        let sizeValue = "16px";
        if(this.state.clicked) {
            sizeValue = "28px";
        }
        return e(
            "div",
            {
                style: {fontSize: sizeValue},
                onClick: () => this.setState({
                    clicked: !this.state.clicked
                })
            },
            this.state.clicked ? 'big text' : 'small text'
        );
    }
}

const container = document.querySelector('#root');
ReactDOM.render(e(App), container);

So if someone clicks the div, its text becomes big and if clicks again, the text returns to default size.

As I see, in this case React doesn't add any attribute like onclick="..." or another to the component in rendered HTML. And if we want to learn at the front-end by some JS client custom code whether component has event handler or some logic, we need to parse JS code of the component in its JS file.

My question, is there build-in or third-party option to always see component event handlers and/or its logic in rendered HTML in some HTML attribute for example something like data-react="..." ?

I mean "to see" not "manually" by a developer, but "programmatically" by custom JS client code.

I also mean not manual adding an attribute in JS code of a component with description of its handlers or logic, but enabling an option (if there is one) so that React itself "automatically" would add such attribute in rendered HTML.