Understanding the Difference Between Named and Default Exports in React

Export vs Export Default — which is right for you?

If you are new to React and have been wondering why some components are exported with a default tag and some aren't, this article will give you a breakdown of the differences.

export function MyComponent() {}
vs
export default MyComponent

Exports without a default tag are Named exports.

Exports with the default tag are Default exports.

Using one over the other can have effects on your code readability, file structure, and component organization.

Named and Default exports are not React-centric ideas. They are es6 features. However, this article will deal with the impacts they have in a React ecosystem.

Named Exports

As the title suggests, named exports use the name of the function or class as their identifier.