CODEWITHSUNDEEP
javascriptreactjsecmascript-6
kaytrance
kaytrance

Reputation: 2757

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

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?

Upvotes: 19

Views: 2721

Answers (2)

Hitmands
Hitmands

Reputation: 14159

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)

Upvotes: 10

Tom Fenech
Tom Fenech

Reputation: 74595

This import statement:

import React, { Component } from 'react';

is really doing two things. It imports the default export, under the name React (which is just a convention, you could call it what you want). It also imports a named export, Component.

The reason that the default React is imported is actually to make JSX work. When your JSX code is transpiled, then it substitutes <div> for React.DOM.div(), so React must exist otherwise things break!

Importing both things separately means that your JSX works but you get to write Component instead of React.Component in your code.

When you do import anything from "react", then the whole file is going to get included either way - any attempt to reduce the bundle size (e.g. Dead Code Elimination, Tree Shaking) is an additional, separate step, which doesn't depend on your import statements but the parts of the code that you use.

In the case of this library, the sane thing happens: the child Component of the default export refers to the same thing as the named export Component.

However, bear in mind that this isn't guaranteed to be the case! If the React library code contained the following:

export default {
    Component: "foo"
};

export const Component = "bar";

Then React.Component === "foo" and Component === "bar".

Upvotes: 8

Related Questions