Search code examples
javascriptreactjsarrow-functions

react export function vs export const: FC

So I am just wondering what is the difference or reasons to use one over the other... 

export function Name() { return <div /> }

vs

export const Name = () => { return <div /> }
Solution

  • Pragmatically (i.e. when building functional components in React), there is no difference between using a named function vs. exporting an arrow function as the value of a named export.

    In both cases you are exporting a function that is (hopefully) not using the this keyword. Thus you don't have to worry about one of the most important differences between a function and an arrow function, which is whether you need this to be lexically bound vs dynamically bound.

    Also as you are assigning a variable to the arrow function, you don't have to worry about reduced traceability in debugging the arrow function. JavaScript is able to infer the function names.

    As you probably know, it would matter if you were exporting the component as a default export because then you can't give a name to a default export. You would need to use two lines:

    const Name = () => { return <div /> }
export default Name