React Router: What’s the Difference Between Components and Routes?

Be worry-free and enjoy React Router like a pro

Route 66 Printed on Road from Pexels.com

React Router (DOM) is an amazing NPM package that allows you to escape the hell of SPA. In my teaching experience, I see that people don’t often dig into the docs. Instead, they see a few code examples and just pattern match their way through creating their app. That’s totally fine…until it’s not.

I’ve noticed new programmers develop a strong habit and preference for either render={this.renderComponent}or component={ComponentName}. Subsequently, they run into trouble. While both work, they behave differently. Let me explain why.

Setup

First, let’s see some code. Let’s assume that we have a class component that gets an array of users from its parent component.

As you can see, we render the homepage component on line 20 and then we render the Profile component on the next line. We pass additional props of the user object to the Profile component. You could use either render or component to associate a given React Component with a path — but which one should you use?

Component or Render?

Now, imagine you first visit your profile, then you go to the homepage, then you visit your profile again. In this scenario:

• render makes the component mount just once, then re-render when required. The component stays in the background — this means that anything you put in componentDidMount, constructor, or, for example, shouldComponentUpdate, will run only once! Also, because the component doesn’t unmount, you may run into data leakage. You could force the component to re-render but is the juice worth the squeeze?
• component, on the other hand, reinstantiates the component on every visit (the component mounts, unmounts and, if you visit, mounts again). This syntax is an abstraction of React.createElement—because of that, it is less efficient in terms of performance but in some cases more necessary.

In general, render works best with functional components, as they do not have lifecycle methods by default, and component works best with class components.

Access to Route Props and Props

When it comes to access to Route props, namely history, location and match, you get them in both options by default for free with React Router, even if you didn’t explicitly pass them. Similarly with passing props — using render or component does not affect your ability to pass down the props.