S
SolidJS•3y ago
jesseb34r

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>
  );
};
5 Replies
thetarnav
thetarnav•3y ago
only syntactical with arrow you can use a type like Component or ParentComponent which might be helpful but on the other hand function works better with type generics in .tsx files
jesseb34r
jesseb34rOP•3y ago
oh, I def like being able to type my components. didn't realize I couldn't do that with function MyComponent() what about naming components vs exporting default anonymous components? like 
export default () => {}
export default () => {}
vs 
const MyComponent = () => {}
export default MyComponent;
const MyComponent = () => {}
export default MyComponent;
thetarnav
thetarnav•3y ago
exporting default anonymous components might not work with HMR, but not sure if it works it works
jesseb34r
jesseb34rOP•3y ago
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 export default Component = { Sub1, Sub2, Sub3 };
REEEEE
REEEEE•3y ago
I think it depends on preference and component size My personal preference is to move sub components to separate files if they get too large and then do the index.ts method

Did you find this page helpful?