CODEWITHSUNDEEP
javascriptreactjses6-class
Carl Mungazi
Carl Mungazi

Reputation: 95

Why is the internal implementation of React.Component a function and not an ES6 class?

I've been digging into React's codebase and I discovered that when you write class App extends React.Component, you are actually extending an object created by the following function:

function Component (props, context, updater) {
  this.props = props;
  this.context = context;
  this.refs = {};
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue ;
}

Component.prototype.isReactComponent = {};

Component.prototype.setState = function(partialState, callback) {
  this.updater.enqueueSetState(this, partialState, callback, 'setState')
}

Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
}

What is the advantage of creating classes this way as opposed to just writing an ES6 class?

Upvotes: 1

Views: 266

Answers (1)

Mark
Mark

Reputation: 1679

https://caniuse.com/#search=es6%20class

This has to do with browser compatibility. Ensuring that the code can run where the class sytax is not supported without having to transpile with something like Babel.

Upvotes: 1

Related Questions