export default class Book extends Component VS export default Book

Question

I'm new to react so its just a question that i want to know which one is more efficient and which give the best time complexity.

No. 1

    export default class BookingTabs extends Component {
  render() {
    return (
    );
  }
}

No. 2

class Book extends Component {
  render() {
    return (
    );
  }
}
export default Book

Questions:

which one is more efficient to use?
which one take less time? even difference in micro seconds?
what is the different between export default and module.export?

Even if any of them had an edge, it still would be a micro-optimisation. Each class gets exported only once. Do what's more readable and convenient. Remember that programming must be fun! — Robo Robok, Mar 15 '18 at 15:44

score 7 · Answer 1 · answered Nov 15 '17 at 09:45

There is no difference between them. but when you want to use some high order component you should use second one. for example you want use "connect" for redux applications. you have to write

class Book extends Component {
  render() {
    return (
    );
  }
}
export default connect(Book)

score 4 · Accepted Answer · answered Nov 15 '17 at 10:10

* which one is more efficient to use?

They are equally efficient. It's a matter of coding style and preference.

No. 1 gives possibility to declare class without name such as

export default class extends Component {
  render() {
    return (
      <div>markup</div>
    );
  }
}

No. 2 gives possibilities for further working with the class before exporting it. Such as adding proptypes Book.propTypes = { /* prop-types defintion */} or used with higher order components.

* which one take less time? even difference in micro seconds?

Your target is probably for browsers which does not understand ES6 modules (import/export) natively. The compiled code is the same. I would recommend to play with https://babeljs.io/repl/ to get an idea what's is generated

* what is the different between export default and module.export?

The first is ES6 modules (to be understand by the browsers in the near future), the latter is NodeJS modules (https://nodejs.org/docs/latest/api/modules.html#modules_module). It's already well explained in Stackoverflow if you search around, e.g. https://stackoverflow.com/a/40295288/815507

export default class Book extends Component VS export default Book

2 Answers2