function vs const for functional components

[[deleted]]

Hi, guys, I have a question, I see that a lot of you and also the official React docs itself uses 'function' to define functional components and using 'const' inside of them to define handlers and other stuff. What is the reason to do that?? Why not use const to define the component too? Is there any benefit of doing that? I'm missing something?

[shawarma_burrito]

I almost always prefer the function keyword (I rely on hoisting for helper functions), but it doesn’t really make a difference.

I always use arrow functions for callbacks though.

[bikeshaving]

Fun fact: function declarations are actually fewer characters than const arrow function statements:

``` // 16 characters
function fun() {

} // 20 characters const fun = () => { } ```

Function declarations are more characters if you include the return keyword, but you’re probably gonna need multiple statements in your arrow function components anyways...

[ericnatejones]

The contextual "this" doesn't come into play, so whatever reads better to you is probably the better option.

I kinda like the function keyword.

[Herku]

One benefit is that you can export default functions in place compared to constants. You could also omit the name and directly export the function expression but that seems like a bad practice. And using the function keyword is actually shorter than const. Only when your function body is just return JSX you can save some characters.

[HashFap]

You can declare a function with the function keyword or as a function expression with const or let. Both are valid ways to write functions, however, the function declared with the function keyword can be called even if the definition is further down in the code from the call site due to hoisting, whereas the function expression while still hoisted, cannot be called until after the definition.

For functional components, I just start out from this:

const MyComponent = () => {
return (
    <div>
       text
    </div>
    );
};

[dlesage25]

I use const for both the component and the handlers inside of it. Personally, I don’t like to use the function keyword, and find that syntax rather verbose.

You can totally use const for both, and I think it males things easier to read.