Reactjs best practices. When to use a render function vs when to use a new component

Question

I've noticed some people writing a "renderSomething" method that returns some jsx. This renderSomething method is called within the actual render() of a react component.

Something like this simple example:

renderTab(title, isVisible) {
    return (
        <div>
            ... some html/jsx that uses title and isVisible
        </div>
    );
}

render() {
    return (
        <div>
            {this.renderTab('Tab 1', true)}
            {this.renderTab('Tab 2', true)}
            {this.renderTab('Tab 3', false)}
        </div>
    );
}

Normally I would extract that renderSomething into it's own component:

render() {
    return (
        <div>
            <Tab title='Tab 1' isVisible=true />
            <Tab title='Tab 2' isVisible=true />
            <Tab title='Tab 3' isVisible=false />
        </div>
    );
}

I think extracting it into it's own component makes it easier to test and goes well with the react's approach to components but I keep seeing this "renderSomething" pattern from multiple people. I am curious if there is a preferred best practices approach. Are either OK? Which one is considered best practice?

It's personal preference, mostly dictated by laziness. Adding just another method to the current component class is faster than creating a new file. If the component is used only at one place in your code, I don't see much benefit in moving it into a new file, especially if it's a small chunk of code. And in that regard, it makes little sense to use a function too. I would probably just put it in the place, no need waste time on making an abstraction for one-time use. — Marko Gresak
– Marko Gresak, Commented Feb 7, 2018 at 18:36

Joshua Underwood · Accepted Answer · 2018-02-07 20:07:52Z

My perspective; having worked on ReactJS applications at an enterprise level is this.

If you will render this content again somewhere else -> Component

If it takes more than 7 opening HTML/JSX tags to accomplish this -> Component

Realistically speaking all this code ends up being repeated over and over in your bundle anyway; but for the sake of maintainability Components are usually the best way to go.

As another matter of preference; when it comes to debugging I like to be able to note the component name that is giving me problems and head straight to a file with that name to investigate...rather than trying to find the relevant code in a file with a totally obscure relationship

e.g. "ListManager has an error" -> Go to list manager as opposed to the list manager in "Contacts" having the error where I then have to dig through the source of Contacts to find the list code.

In the case of your tabs IF I were to write a "renderSomething" version it wouldn't be with three calls to renderTab. I'd loop the tabs array to make the call with each tab item. Personal preference is what it all boils down too.

Collectives™ on Stack Overflow

Reactjs best practices. When to use a render function vs when to use a new component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related