Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Chad Dugas
PLUS
Chad Dugas
Courses Plus Student 13,304 Points

Importing from 'react-router'

Why did we import from 'react-router' like this:

import { browserHistory } from 'react-router';
import { Link } from 'react-router';

rather than like this:

import { Link, browserHistory } from 'react-router';

1 Answer

Samuel Ferree
Samuel Ferree
31,721 Points

I'm not sure if there's a functional difference. I think it's just preference for whichever feels more readable.

the JS runtime might execute two import statements, which might marginally slow it down the tiniest bit... but I'd sure hope that babel or some minifier can recognize and condense the two.

Chad Dugas
Chad Dugas
Courses Plus Student 13,304 Points

Awesome, thanks for the answer. I figured they were the same, but Guil used a couple different syntax styles while building the app, so I just wanted to make sure there wasn't some functional difference that I was missing.

Christian Tucker
Christian Tucker
Courses Plus Student 1,987 Points

To add onto this babel only issues a single import statement, which is const _ = require(module) and any sub-imported modules are referenced using dot notation, for example.

import { a, b } from 'c';
a.method();
b.method();

and

import { a } from 'c';
import { b } from 'c';
a.method();
b.method();

and

import C from 'c';
C.a.method();
C.b.method();

all compile into the same code,

'use strict';

var _c = require('c');

_c.a.method();
_c.c.method();

Although, the last one with import C from 'c'; does add a little more code as it has to require the .default property.

Keep in mind that requireJS caches the loaded module the first time they're referenced anyway, so calling require() / import multiple times will not slow down your application, unless you force a cache-reload.