CODEWITHSUNDEEP
reactjstypescript
Socrates
Socrates

Reputation: 9604

Is making use of JSX.Element a good practice?

I am reasonably new to React (^16.6.0). I very frequently make use of React.Component which has the render(). Sometimes I might have bigger parts in this method, so to alleviate the code and for better readability, I put big chunks into their own methods. This works well and also does a good job for readability. My question here is, whether this is a good practice? The new methods return JSX.Element, is that good regarding performance?

Code example before:

export class AreaDistinguisher extends React.Component<AreaDistinguisherProps, {}> {
    public render() {
        switch (this.props.targetDisplay) {
            case "page":
                return <PageDisplay2    id={this.props.targetId}
                                        onRelatedMenusChanged={(relatedMenus: RelatedMenu[]) => this.props.onRelatedMenusChanged(relatedMenus)} />;
            case "report":
                return <Report2Display />;
            case "tour":
                return <TourDisplay menu={this.props.menu} />;
            default:
                return <div />;
        }
    }
}

Code example after:

export class AreaDistinguisher extends React.Component<AreaDistinguisherProps, {}> {
    public render() {
        switch (this.props.targetDisplay) {
            case "page":
                return this.buildPageDisplay();
            case "report":
                return this.buildReportDisplay();
            case "tour":
                return this.buildTourDisplay();
            default:
                return <div />;
        }
    }

    private buildPageDisplay(): JSX.Element {
        return <PageDisplay2    id={this.props.targetId}
                                onRelatedMenusChanged={(relatedMenus: RelatedMenu[]) => this.props.onRelatedMenusChanged(relatedMenus)} />;
    }

    private buildReportDisplay(): JSX.Element {
        return <Report2Display />;
    }

    private buildTourDisplay(): JSX.Element {
        return <TourDisplay menu={this.props.menu} />;
    }
}

Upvotes: 0

Views: 168

Answers (1)

Peter Ambruzs
Peter Ambruzs

Reputation: 8223

I think it is all the same. If you get a cleaner program with better readability and maintainability than it is better.

Think about that way that you can substitute every JSX expression with a createElement() function call. If you think this way, you will realize, that the difference is just a couple more function call. Readability is much higher in my priority than this minuscule performance drop.

Upvotes: 3

Related Questions