0

I am beginner at React and I have seen different implementations for pages/components. Could you please clarify me the differences between the followings and pros/cons?

#1

const Home = () => {
  ...body
};

export default Home;

#2

export default function Home() {
  ...body
};

#3

export const Home = () => {
  ...body
}

#4

export function Home () {
  ...body
}

I am not sure if export default Home; must be added to 3 or 4, but if so or there is an error, you can explain the missing parts. Any help would be appreciated.

Joshua
  • 3,055
  • 3
  • 22
  • 37
  • ```export default``` exports a fallback value for your module, without a default keyword you export a thing (class, function, variable or etc). Also it's possible to use both in sametime. e.g. ```import { thing }, defaultthing from 'module'``` – Vahid Alimohamadi Mar 08 '23 at 08:01
  • Which one should I prefer in general situation? –  Mar 08 '23 at 08:08
  • @Joshua What about you? Do you have an idea? –  Mar 08 '23 at 08:08
  • For React components, I often use default export. So for a `.jsx` there will only be an export and only one component in it. It's not a strict rule, but I try to follow that. And for utility or service files, I will go with named export as I usually need to export multiple functions from them. – Joshua Mar 08 '23 at 08:21
  • I think this might answer your question? https://stackoverflow.com/questions/33611812/export-const-vs-export-default-in-es6 – Joshua Mar 08 '23 at 08:22
  • Good explanations, thanks a lot. Actually, I do not know which one is which. Could you post an answer please by giving the types and the places where you prefer that type? –  Mar 08 '23 at 11:36

0 Answers0