React function not displayed in "this" but yet still callable

Question

I am confused as to how React functions bind to this.

import React, { Component } from 'react';

class App extends Component {
  randomFunction(){
    console.log("Hello World")
  }

  render() {
    return (
      <div>
        {console.log(this)}
        {console.log(this.randomFunction)}
      </div>
    );
  }
}

export default App;

You should see on the console both of these return something, however randomFunction is not present in the previous this object. As show in the image below

I am curious to know how/where this link is made?

Answer 1

That's because your function is moved to the prototype. This way it is created only once, not per every component instance.

You can verify this by calling console.log(this.__proto__) or expanding __proto__ object visible on your screenshot.