1

I see some applications do this:

// App.jsx
export function App() {}

// index.jsx
import { App } from './App'

and others do this:

// App.jsx
export const App = () => {}

// index.jsx
import { App } from './App'

Is there any difference? If there are differences, when would you pick one over the other?

Sometip
  • 332
  • 1
  • 10
  • 1
    It's not the form of function that's the distinction (your first could just as easily be `export const App = () => { };` and your second could be `export default function App() { }`), it's that the first one is a *named export* (and associated import) and the other is the *default export* (and associated import). See the linked question's answers (and [MDN's documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)) for the distinction between the two. – T.J. Crowder Dec 01 '22 at 13:24
  • 1
    Thanks @T.J.Crowder I didn't write my question properly - I wasn't really wasking about named/default exports, I was more curious about using a const or a function that is exported – Sometip Dec 01 '22 at 13:26
  • 1
    In that case, see [this question's answers](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) for the distinction between an arrow function and a traditional function. (For a React component function, it makes no difference. In other situations, it might. ;-) ) – T.J. Crowder Dec 01 '22 at 13:29
  • (Here's the [original dupetarget](https://stackoverflow.com/questions/46913851/why-and-when-to-use-default-export-over-named-exports-in-es6-modules) for anyone who's interested in the import/export angle.) – T.J. Crowder Dec 01 '22 at 13:30

0 Answers0