Best way to define functions within react functional components?

Question

There is a lot of guidance online about defining functions within React.Component objects, but I am having trouble finding best practices for functions within Functional Components. For instance, what are the implications of myFC_1 vs myMC_2 in the typescript code below.

interface Props { name: string};

export const myFC_1: FunctionComponent<Props> = (props:Props) {
    function helloWorld(): string {
        return "Hello " + props.name;
    }
    return <div> { helloWorld() }</div>
}

export const myFC_2: FunctionComponent<Props> = (props:Props) {
    const helloWorld =():string =>  {
        return "Hello " + props.name;
    } 
    return <div> { helloWorld() }</div>
}

marc_s · Accepted Answer · 2019-07-12 19:32:51Z

1

Just be consistent every time you are doing this.. In functional component it doesn't really matter which approach u use. Fat arrow can be maybe a bit slower because of automatic binding which is useless in functional component, but I am literally just guessing without any benchmark :).

Class component is different thing.. When you are defining function inside render use fat arrow, so you don't have to think about context binding. So the main thing here is to just make deal with your team what you will use and then follow this rule.

edited Jul 12, 2019 at 19:32

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 8, 2019 at 16:40

Pavel Kratochvil

4812 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Estus Flask Over a year ago

The performance may differ between engines but it is normally the same.

Estus Flask · Accepted Answer · 2019-04-08 16:48:46Z

0

There's no best way, this is a matter of preference.

Function declaration can benefit from hoisting if necessary:

export const myFC_1: FunctionComponent<Props> = (props:Props) {
    return <div> { helloWorld() }</div>

    function helloWorld() {
        return "Hello " + props.name;
    }
}

And arrow function can be a one-liner:

export const myFC_2: FunctionComponent<Props> = (props:Props) {
    const helloWorld =() => "Hello " + props.name;

    return <div> { helloWorld() }</div>
}

string type is optional because it is inferred.

answered Apr 8, 2019 at 16:48

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Collectives™ on Stack Overflow

Best way to define functions within react functional components?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related