function MyComponent() vs arrow function Component

I am relatively new to the design space of component systems and figuring it all out. I still don't understand the tradeoffs and standards for why to use different syntaxes for declaring components. Basically, what is the best way or what are the tradeoffs between defining components in these different ways?

const MyComponent = (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};
export default MyComponent

const MyComponent = (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};
export default MyComponent

export default (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};

export default (props) => {
  // logic
  return (
    <div>{content}</div>
  );
};

export default function MyComponent(props) {
  // logic
  return (
    <div>{content}</div>
  );
};

export default function MyComponent(props) {
  // logic
  return (
    <div>{content}</div>
  );
};

thetarnav•12/16/22, 9:53 PM

only syntactical
with arrow you can use a type like

Component

Component

or which might be helpful
but on the other hand

function

function

works better with type generics in .tsx files

jesseb34rOP•12/16/22, 9:54 PM

oh, I def like being able to type my components. didn't realize I couldn't do that with

jesseb34rOP•12/16/22, 9:54 PM

what about naming components vs exporting default anonymous components?

jesseb34rOP•12/16/22, 9:55 PM

thetarnav•12/16/22, 9:56 PM

exporting default anonymous components might not work with HMR, but not sure
if it works it works

jesseb34rOP•12/16/22, 10:00 PM

ooh, while i've got you, I've also been wondering about the composition of a generic composable component that has say a root component and several composable sub components. How should I handle exporting those? I've considered having separate files for each and an index.ts that exports them together, having them all in the same file and exported individually, or all in the same file and not exported inline with a default export at the end like

REEEEE•12/16/22, 10:18 PM

I think it depends on preference and component size

REEEEE•12/16/22, 10:19 PM

My personal preference is to move sub components to separate files if they get too large

REEEEE•12/16/22, 10:19 PM

and then do the index.ts method