Infinite Loop With Higher Order React Redux Component - reactjs

Question

I am having some trouble with an infinite loop when using a Higher Order Component to handle authenticated routes. The authentication is very basic, and is just a boolean of true or false in the redux state.
When the app initially starts, it checks to see if there is a user stored in localStorage. If it does not return null, we immediately dispatch a SIGN_IN action.
import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import reducers from './reducers'
import reduxThunk from 'redux-thunk'
import { SIGN_IN } from './actions/types'
import logger from 'redux-logger'
const createStoreWithMiddleware = applyMiddleware(reduxThunk, logger)(createStore)
const store = createStoreWithMiddleware(reducers)
import App from './components/App'
const user = localStorage.getItem('user')
if(user) {
store.dispatch({ type: SIGN_IN })
}
ReactDOM.render (
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>,
document.querySelector('.main')
)
This is the higher order component.
import React, { Component } from 'react';
import { connect } from 'react-redux';
export default function(ComposedComponent) {
class RequireAuth extends Component {
componentWillMount = () => {
if(!this.props.auth)
this.props.history.push('/')
}
render() {
return <ComposedComponent {...this.props} />
}
}
function mapStateToProps(state) {
return { auth: state.auth };
}
return connect(mapStateToProps)(RequireAuth);
}
The logic inside of componentWillMount seems to be what is causing the infinite loop, but I really do not know why. It seems to prevent me from going to any other routes, but as you can see in the console output below, it blows up in extraordinary fashion in doing so.
If it helps, here is the component, where I am wrapping my components with the HOC.
export default class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="app"
style={{
backgroundImage: 'url("./img/base-bg.jpg")',
backgroundSize: 'cover',
backgroundPosition: 'center center',
backgroundRepeat: 'no-repeat'
}}
>
<Switch>
<Route path="/" exact component={RequireAuth(Intro)} />
<Route path="/landing" exact component={RequireAuth(Intro)} />
<Route path="/journey" component={RequireAuth(Exhibit)} />
<Redirect to="/landing" />
</Switch>
<Footer />
</div>
)
}
}
I am using React Router V4 if that helps. And for clarification, contains a login form, and a landing page. If the user is not authenticated, intro shows a login form, and when authed, the landing page should be shown. Perhaps this is where I am messing things up, and shouldn't be nesting my components. I am unsure though.

Answer 1

This boiled down to the hackalicious nesting and how I was wrapping my components with RequireAuth. Instead of having Login and Landing inside of a component called Intro, I scrapped that and changed my route config to this:
<Switch>
<Route path="/" exact component={Login} />
<Route path="/landing" exact component={RequireAuth(Landing)} />
</Switch>
Here is my HOC now, pretty much the same.
export default function(ComposedComponent) {
class RequireAuth extends Component {
componentDidMount = () => {
if(!this.props.auth)
this.redirectToLogin()
}
componentWillUpdate = nextProps => {
if(!nextProps.auth)
this.redirectToLogin()
}
redirectToLogin = () => this.props.history.push('/')
render() {
return <ComposedComponent {...this.props} />
}
}
function mapStateToProps(state) {
return { auth: state.auth };
}
return connect(mapStateToProps)(RequireAuth);
}