Is there any reason to prefer one of these methods to write stateless components?
- Function declaration with inner function declarations
export default function MyComponent(props) {
function myHelper() {
return "something";
}
return (
<p>
{myHelper()}
</p>
);
}- Function declaration with inner function expressions:
export default function MyComponent(props) {
const myHelper = () => {
return "something";
};
return (
<p>{myHelper()}</p>
);
}- Function declaration with external function declarations:
function myHelper() {
return "something";
}
export default function MyComponent(props) {
return (
<p>
{myHelper()}
</p>
);
}I don't prefer using function expression as main component function, so I skipped those possibilities.
Is there any performance issue with one of these approaches? Or any other reason to use one above others?
Method 3. is easier to test, because I can write helpers as pure functions, export them and import in tests file. But there is the only argument I can find.
const MyComponent = () => ( //your code...);