pros/cons of defining methods inside of stateless components

user_1789684 0
Viewed 1745

Say I have a (somewhat contrived component) like this 

    const ExampleComponent = (props) => {
    const renderList = () => {
        if (props.list) {
            props.list.map((item) => <ListItem {...props.list} />);
        } else {
            return <div>List Not Found </div>
        }
    };

    return (
        <div>
            <H1>LIST VIEW</H1>
            {renderList()}
        </div>
    )
};

Is React going to reinitialize that function on every render tick? Should I be worried about that or is it a negligible detail.

Would it be considered to write my component as 

const renderList = (list) => {
    if (list) {
        list.map((item) => <ListItem {...list} />);
    } else {
        return <div>List Not Found </div>
    }
};

const ExampleComponent = (props) => {
    return (
        <div>
            <H1>LIST VIEW</H1>
            {renderList(props.list)}
        </div>
    )
};
reactjs
1 Answers

just read a little bit of this: http://wiki.c2.com/?PrematureOptimization

"Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%."

Answering to your questions:

Is React going to reinitialize that function on every render tick? Yup, that function will be re-declared on every render.

Should I be worried about that or is it a negligible detail. Don't worry about that.

user_58017530
Related