exportdefaultfunctionA(){}// vsexportfunctionA(){}

I think that both methods are good. But I can see some advantages of named exports.

Named exports will not allow to implicitly change the import name

// No error with default exportimportButtonfrom'../components/Text'// now we have a "Button" component// which is actually a "Text" component// TypeScript will throw and error// if import and export names don't matchimport{Button}from'../components/Text'// we will get an error here

Named exports are easier to re-export and organise

Imagine we have several UI components insidecomponents folder. Each component in a separate file:components/Header.tsx,components/Text.tsx,components/Button.tsx, etc.

Now to be able to import these components asimport { Header, Text, Button } from '../components' we just need to create thecomponents/index.ts.

export*from'./Header'export*from'./Text'export*from'./Button'

Compare to the default exports where will need to write:

export{defaultasHeader}from'./Header'export{defaultasText}from'./Text'export{defaultasButton}from'./Button'

Named exports are shorter to write

exportfunctionComponent(){}// orexportconstComponent=()=>{}

Compared to default exports:

exportdefaultfunctionComponent(){}// orconstComponent=()=>{}exportdefaultComponent

If you have any questions or comments, please post them below, press 💖 button and happy hacking! 🙌🏻

Credits

Photo bySergey Sokolov onUnsplash