Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Chad Dugas
PLUS
Chad Dugas
Courses Plus Student 13,304 Points
Posted by Chad Dugas
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,722 Points
Samuel Ferree
Samuel Ferree
31,722 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
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
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.