I mostly see JavaScript use classes as a constructor as following:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

What's the reason React uses classes without using the contructor() function, such as following? I don't see classes being used to create instances.

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

I mostly see JavaScript use classes as a constructor as following:

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

What's the reason React uses classes without using the contructor() function, such as following? I don't see classes being used to create instances.

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

• javascript
• reactjs
• class
• constructor

• 2 Add breakpoints to React.Component and this class including a constructor and step through line by line to really see what is happening in detail including how the extends is effecting the compilation and execution. There is a lot happening behind the scenes to render even this simple component. It goes beyond just the presence of a constructor not. Also try adding a constructor with initial state and see the effects. – Alexander Staroselsky Commented Mar 15, 2019 at 1:00

4 Answers 4

Right now you should use classes in React if you need to use "advanced" component lifecycle methods like shouldComponentUpdate() or such.

Previously class components were used to handle local state in them. Right now we have Hooks API which allows to use state in a more elegant way and without need of class components.

If you want more details, you can read the article by Dan Abramov: How Are Function Components Different from Classes?.

Regardless your example, you're right, this code:

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

can be written as:

function App() {
  return <div className="app-content"></div>
}

What's the reason React uses classes without using the contructor() function

From the JavaScript class doc:

If you do not specify a constructor method, a default constructor is used.

So a constructor exists for every class whether a constructor method is specified or not.

I don't see classes being used to create instances.

React components implemented as classes get instantiated by React as part of the rendering process.

Specifically, in the new React Fiber creating an instance of a React class component happens on this line of the source code.

But yes, @vicondin is right that the simple component from the question can be implemented as a function component, that class components used to be the only way to maintain state, implement lifecycle methods, etc., and that the new Hooks makes it possible to...

use state and other React features without writing a class.

In React, state is used in a React class component. There you can set initial state in the constructor of the class, but also access and update it with this.state and this.setState, because you have access to the class instance by using the this object.

If you use class in React component, even without using constructor() you can set initial state like below:

class App extends Component {
  state = {
    hello: 'Hello'
  };

  onClickHello = value => {
    this.setState({ hello: 'Why did you clicked?' });
  };

  render() {
    return (
      <div className="app-content" onClick={this.onClickHello}>
        {this.state.hello}
      </div>
    )
  }
}

Another advantage is you can make use of all the React lifecycle methods

Update: After React16, you can use the lifecycle events even in function components using react hooks

Also biggest reason is the handling of state and lifecycle(componendDidMount ..etc) , class can do everything functions can , but at the cost of readability and statelessness . But in the most cases I rarely use classes only if I need a complex parent component with lifecycle