perf(Route Viewer): make RouteRow a PureComponent to reduce unneeded re-renders

Author: evansiroky

lib/components/viewers/route-viewer.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { Component, PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { Label, Button } from 'react-bootstrap'
 import { VelocityTransitionGroup } from 'velocity-react'
@@ -40,7 +40,15 @@ class RouteViewer extends Component {
   }
 
   render () {
-    const { operators, routes, hideBackButton, languageConfig } = this.props
+    const {
+      findRoute,
+      hideBackButton,
+      languageConfig,
+      operators,
+      routes,
+      setViewedRoute,
+      viewedRoute
+    } = this.props
     const sortedRoutes = routes ? Object.values(routes).sort(routeComparator) : []
     const agencySortedRoutes = operators.length > 0
       ? sortedRoutes.sort((a, b) => {
@@ -78,10 +86,13 @@ class RouteViewer extends Component {
               const operator = operatorForRoute(operators, route) || {}
               return (
                 <RouteRow
+                  findRoute={findRoute}
+                  isActive={viewedRoute && viewedRoute.routeId === route.id}
                   key={route.id}
                   operator={operator}
                   route={route}
-                  {...this.props} />
+                  setViewedRoute={setViewedRoute}
+                />
               )
             })
           }
@@ -91,15 +102,10 @@ class RouteViewer extends Component {
   }
 }
 
-class RouteRow extends Component {
-  isActiveRoute = () => {
-    const { route, viewedRoute } = this.props
-    return viewedRoute && viewedRoute.routeId === route.id
-  }
-
+class RouteRow extends PureComponent {
   _onClick = () => {
-    const { route, findRoute, setViewedRoute } = this.props
-    if (this.isActiveRoute()) {
+    const { findRoute, isActive, route, setViewedRoute } = this.props
+    if (isActive) {
       // Deselect current route if active.
       setViewedRoute({ routeId: null })
     } else {
@@ -110,10 +116,8 @@ class RouteRow extends Component {
   }
 
   render () {
-    const { operator, route, routes, viewedRoute } = this.props
-    const isActive = this.isActiveRoute()
+    const {isActive, route, operator} = this.props
     const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator
-    const activeRouteData = isActive ? routes[viewedRoute.routeId] : null
     const color = `#${defaultRouteTextColor || route.textColor || '000000'}`
     const backgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
     const longName = (longNameSplitter && route.longName && route.longName.split(longNameSplitter).length > 1)
@@ -146,8 +150,8 @@ class RouteRow extends Component {
         <VelocityTransitionGroup enter={{animation: 'slideDown'}} leave={{animation: 'slideUp'}}>
           {isActive && (
             <div style={{ padding: 8 }}>
-              {activeRouteData.url
-                ? <a href={activeRouteData.url} target='_blank'>Route Details</a>
+              {route.url
+                ? <a href={route.url} target='_blank'>Route Details</a>
                 : 'No route URL provided.'
               }
             </div>