Prevent ConnectedRouter from re-rendering on every redux store update

src/ConnectedRouter.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { connect, ReactReduxContext } from 'react-redux'
 import { Router } from 'react-router'
@@ -15,7 +15,7 @@ const createConnectedRouter = (structure) => {
    * This creates uni-directional flow from history->store->router->components.
    */
 
-  class ConnectedRouter extends Component {
+  class ConnectedRouter extends PureComponent {
     constructor(props) {
       super(props)
 

test/ConnectedRouter.test.js

@@ -2,7 +2,7 @@ import 'raf/polyfill'
 import React, { Children, Component } from 'react'
 import PropTypes from 'prop-types'
 import configureStore from 'redux-mock-store'
-import { createStore, combineReducers } from 'redux'
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux'
 import { ActionCreators, instrument } from 'redux-devtools'
 import Enzyme from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
@@ -14,7 +14,7 @@ import { onLocationChanged } from '../src/actions'
 import plainStructure from '../src/structure/plain'
 import immutableStructure from '../src/structure/immutable'
 import seamlessImmutableStructure from '../src/structure/seamless-immutable'
-import { connectRouter, ConnectedRouter } from '../src'
+import { connectRouter, ConnectedRouter, routerMiddleware } from '../src'
 
 Enzyme.configure({ adapter: new Adapter() })
 
@@ -123,7 +123,63 @@ describe('ConnectedRouter', () => {
 
       expect(onLocationChangedSpy.mock.calls).toHaveLength(3)
     })
-  })
+
+    it('only renders one time when mounted', () => {
+      let renderCount = 0
+
+      const RenderCounter = () => {
+        renderCount++
+        return null
+      }
+
+      mount(
+        <MockProvider store={store}>
+          <ConnectedRouter {...props}>
+              <Route path="/" component={RenderCounter} />
+          </ConnectedRouter>
+        </MockProvider>
+      )
+
+      expect(renderCount).toBe(1)
+    })
+
+    it('does not render again when non-related action is fired', () => {
+      // Initialize the render counter variable
+      let renderCount = 0
+
+      // Create redux store with router state
+      store = createStore(
+        combineReducers({
+          incrementReducer: (state = 0, action = {}) => {
+            if (action.type === 'testAction')
+              return ++state
+
+            return state
+          },
+          router: connectRouter(history)
+        }),
+        compose(applyMiddleware(routerMiddleware(history)))
+      )
+
+
+      const RenderCounter = () => {
+        renderCount++
+        return null
+      }
+
+      mount(
+        <MockProvider store={store}>
+          <ConnectedRouter {...props}>
+              <Route path="/" component={RenderCounter} />
+          </ConnectedRouter>
+        </MockProvider>
+      )
+
+      store.dispatch({ type: 'testAction' })
+      history.push('/new-location')
+      expect(renderCount).toBe(2)
+    })
+  }) 
 
   describe('with immutable structure', () => {
     let ConnectedRouter