What is the benefit importing React, {Component} instead of just React?

Question

What is the major benefit of writing

import React, { Component } from 'react';
class Link extends Component {
   ...
}

instead of

import React from 'react';
class Link extends React.Component {
   ...
}

when it comes to react 15.4.x??

In my perspective and in my case (correct me if I am wrong) it does not matter at all since:

1. I am using a webpack2 for making my bundles;
2. I use code splitting to split my app code from vendor code;
3. I use webpack.optimize.CommonsChunkPlugin plugin with minChunks: Infinity setting to make sure that all vendor code is included only once.

From understanding how ES6 imports work I understand that by using named import of {Component} I state that I want to use only Component component in my code, which looks.. cleaner. But since whole React package is still used in the app, I can create my classes with extension from React.Component instead of just Component and in result webpack will still produce the same amount of code and my bundle size will be the same in both cases.

Am I correct?

Answer 1

There is no difference, React.Component is the same object as Component, the second way is more eloquent in my opinion, because it really explains that you are using the Component object from the React library.

The first one seems to refer a member, but, it comes from the pre modules era of javascript, where everything had to be attached to the exported global namespace (just to avoid global namespace pollution).

---

something that could be under the hood:

// this should be assumed as an example only.

class React { ... }
class Component { ... }


React.Component = Component;

// ES6
export {Component}
export default React;

// ES5
window.React = React;

Note: as someone said, you also need to import React because JSX needs to have it on scope, but, if you want to avoid it, you can expose React globally (window.React = React)