Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the importance of Default exports in ReactJS

In http://2ality.com/2014/09/es6-modules-final.html#default-exports-one-per-module, it's stated about default exports that:

Modules that only export single values are very popular in the Node.js community. But they are also common in frontend development where you often have constructors/classes for models, with one model per module. An ECMAScript 6 module can pick a default export, the most important exported value. Default exports are especially easy to import.

My Question: Is default export just a lazy coder style to make the import easy ? or does it have other importance. I don't come from NodeJS community, Im a pythoner, so trying to understand the need for exporting a default method to import it in a easy way.

EDITED:

Example:

With export default

//------ MyClass.js ------
export default class { ... };

//------ main2.js ------
import MyClass from 'MyClass';

Without export default

//------ MyClass.js ------
export App class { ... };

//------ main2.js ------
import {App} from 'MyClass';

In the above example, what I see is just avoiding flower brackets in export default ? Is there is anything beyond that ?

like image 338
rrmerugu Avatar asked Jan 23 '26 09:01

rrmerugu


1 Answers

It can and will make a difference when you consider tree-shaking and larger, more complex modules. Let's say you made a giant util library:

export function filterObjects(array, predicate) {
   // code
}

export function massiveExpensiveFunction(args) {
   // lots of code
}

...a lot more code

export default {
   massiveExpensiveFunction,
   filterObjects
}

You now have the option of:

import Util from './Util';

Which will load all of the code, including your massiveExpensiveFunction, or:

import { filterObjects } from './Util';

Which given the right module building system that supports tree-shaking, will only import the used portions of the code. This could reduce the overall build size by eliminating unused/unnecessary code.

like image 134
Rob M. Avatar answered Jan 24 '26 23:01

Rob M.



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!