Why not declare variables outside/at the top of class to avoid using this keyword?

Question

Why should I declare vars, lets and consts inside a class, and require my entire class to use the keyword this to refer to these variables, instead of just at the top of the file before the class, to avoid the need to use this. I get the point of instance variables for a class I will reuse multiple times, but if it is just a page to my website, is there any need to declare variables within the class. Thanks.

Answer 1

It is a matter of shared memory (closure and context).
When you use the instance to store data (and referring it via this), then you can't preserve the data across mounting (when component is re-mounted).
When you use the "external" variable, the data will persist.

Here is a small example, just click the button couple of times and see how the number of the external variable increase while the instance variable gets reset on each mount :

let externalCounter = 0;

class Test extends React.Component {
  componentDidMount() {
    externalCounter += 1;
    this.myCounter += 1;
  }
  
  myCounter = 0;
  
  render() {
    return <div>{`external counter is ${externalCounter} and myCounter is ${
      this.myCounter
    }`}</div>;
  }
}


class App extends React.Component {
  state = { mount: true };
  toggleMount = () => this.setState(({ mount }) => ({ mount: !mount }));
  render() {
    const { mount } = this.state;
    return (
      <div>
        <button onClick={this.toggleMount}>toggle mount</button>
        {mount && <Test />}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root" />

Of course i'm under the impression you are using some sort of modules exports and the "external" variable is declared at the module scope.

Edit
As a followup to your comments and questions bellow:

so two classes in separate files. One parent, one child. The child's module level variable will not persist across mounting and mounting.

This is not quite true.
Given this module:

let externalCounter = 0;

class Test extends React.Component {
  componentDidMount() {
    externalCounter += 1;
    this.myCounter += 1;
  }

  myCounter = 0;

  render() {
    return <div>{`external counter is ${externalCounter} and myCounter is ${
      this.myCounter
      }`}</div>;
  }
}

export defualt Test;

Think of it as a big function that have a nested function:

function SomeModule(){
  let externalCounter = 0;
  function Test(props){
    // some logic
  }

  return Test;
}

When you import Test in another module (file) you actually grabbing the inner function Test and it will get re-invoked whenever react will re-mount this component, but it doesn't mean the SomeModule function will get re-invoked, it won't. hence the externalCounter will persist data across calls of the Test function.
This is actually a closure.