CODEWITHSUNDEEP
javascriptreactjsreact-functional-component
Sam YC
Sam YC

Reputation: 11617

reactjs functional component function/object re-declared (performance concern)

In the pass I use class components as below:

class Car extends React.Component {

    testing = () => {
        console.log(this.props.brand);
    }

    render() {
        testing();
        return <h2>I am a {this.props.brand}!</h2>;
    }
}

Nowadays, I need to convert them to functional components as below:

function Car(props) {

    const testing = () => {
        console.log(this.props.brand);
    }
     
    testing();

    return (
        <h2>I am a {this.props.brand}!</h2>
    );
}

As you can see in the functional component way, the testing method is repeating being created during each rendering cycle, and class component way, it is declared outside of render function.

I tried to move it to outside like this:

const testing = () => {
    console.log(this.props.brand);
}

function Car(props) {

    testing();

    return (
        <h2>I am a {this.props.brand}!</h2>
    );
}

This doesn't work because I need props value. I know I can pass props in method argument, but I have lot of methods to convert, I do not want to change the method signatures.

I refer to this doc, it said:

Are Hooks slow because of creating functions in render? No. In modern browsers, the raw performance of closures compared to classes doesn’t differ significantly except in extreme scenarios.

That doesn't sound answer the question, it compare the performance of creation of closure and class, which is not the case I am referring to. In my case, it is more referring to the repeating creation of same method in functional components, but not in class components.

Could anyone advise, would that cause any performance issue if I go for functional components?

Upvotes: 0

Views: 57

Answers (3)

CertainPerformance
CertainPerformance

Reputation: 370659

On modern computers, the overhead of creating a function in a block is basically nothing. Like the docs you read say, in extreme scenarios, it might be an issue (though unlikely), like maybe if there are 1000 such components and they're being updated multiple times a second - not re-creating the function each render might make the app a tiny bit faster. But this sort of situation is quite unlikely.

Better to strive for code clarity and readability. If you find that a particular component is running too slowly, and you've run a performance test to identify the bottleneck(s) in it, go ahead and try to optimize it if you want - but it's probably not worth it before then.

Upvotes: 2

Julio
Julio

Reputation: 11

Try using useEffect hooks.


import { useEffect } from 'react';

function Car(props) {

    const testing = () => {
        console.log(this.props.brand);
    }
     
    useEffect(()=>{
      testing();
    },[])
     
    return (
        <h2>I am a {this.props.brand}!</h2>
    );
}

Upvotes: 0

Griffin
Griffin

Reputation: 339

The documentation you quoted actually is addressing your exact concern. The answer is no, you don't have to worry about the performance of functional components with enclosed functions compared with class components with methods.

Upvotes: 0

Related Questions