Import React vs React, { Component }

Import React vs Import React, { Component }

Which one is better and why?

Or does it make no difference other than writing less code later on?

Does writing { Component } mean it only imports the Component object?

Answers 1

  • import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component. It's less typing and duplication of the React namespace, which is generally a desired modern coding convention.

    Additionally, tools like Webpack 2 and Rollup do "tree shaking," meaning any unused exports are not bundled into your final code. With import React/React.Component you are guaranteeing all of React's source code will be bundled. With import { Component }, some tools will only bundle the code needed to use the Component class, excluding the rest of React.

    The above paragraph is irrelevant in this specific case, because you always need to have React in the current namespace to write JSX, but only importing the exact modules you need in other cases may lead to smaller bundled code in the end.

    Beyond that it's entirely personal preference.


Related Articles