SolidJS•2y ago

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•2y 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•2y 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 () => {}

const MyComponent = () => {}
export default MyComponent;

const MyComponent = () => {}
export default MyComponent;

thetarnav•2y ago

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

jesseb34r•2y 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•2y 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

Gaming

Programming

function MyComponent() vs arrow function Component