CODEWITHSUNDEEP
javascriptreactjsclassconstructor
Kevvv
Kevvv

Reputation: 4023

What's the purpose of using classes in React?

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>
        )
    }
}

Upvotes: 5

Views: 14289

Answers (4)

Amar Bugarin
Amar Bugarin

Reputation: 21

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

Upvotes: 1

Abhijith Sasikumar
Abhijith Sasikumar

Reputation: 14980

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

Upvotes: 1

Brian Adams
Brian Adams

Reputation: 45810

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.

Upvotes: 1

flppv
flppv

Reputation: 4289

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>
}

Upvotes: 12

Related Questions