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>
  );
};

SolidJS•4y ago•

9 replies

jesseb34r

function MyComponent() vs arrow function Component

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>
  );
};

function MyComponent() vs arrow function Component

Similar Threads

function MyComponent() vs arrow function Component

Similar Threads

Similar Threads

Similar Threads