ReactJS + Redux: Infinite render loop with (functional) Component wrapper + dispatch (state) in child Component

Question

i created an infinite render loop with an Component wrapper and a child Component that calls a dispatch function (to change the state in redux), but I do not see why this component has to be rerendered, because the props do not change imo.

Wrapper:

export default function(ComposedComponent){
    class Authenticate extends Component {
        componentWillMount(){
            //If not logged in
            if (!this.props.loggedIn){
                this.context.router.history.replace({ pathname: '/login' });
            }
            console.log("Mount parent");
        }
        render(){
            return(
                    <ComposedComponent {...this.props} />
                );
        }
    }
    Authenticate.propTypes = {
        loggedIn: PropTypes.bool.isRequired
    }
    // Provide router in context for redirect 
    Authenticate.contextTypes = {
        router: PropTypes.object.isRequired
    }
    const mapStateToProps = state => ({
        loggedIn: state.user.loggedIn
    })

    return connect(mapStateToProps)(Authenticate);
}

Child Component:

class InternalArea extends Component {
    componentDidMount(){
        this.props.setTitle(this.props.title);
        console.log("Mount child");
    }

    render(){

        return(
            <div>
                This is an internal area for logged in users.
            </div>
        );
    }

}
const mapDispatchToProps = dispatch => bindActionCreators({
        setTitle
    }, dispatch)

export default connect(
    null,
    mapDispatchToProps
 )(InternalArea);

The Wrapper is integegrated as a Route (PropsRoute just passes additional props) in App.js:

 <PropsRoute exact path="/internal-area" component={requireAuth(InternalArea)} title="Internal Area" />

Removing this.props.setTitle(this.props.title); in the child component solves the loop error, but I need to dispatch it there. Or should i move it? Why does it change the props?

Answer 1

Finally I figured it out how to not create this loop by not using a functional wrapper but a Wrapper component that receives the Route Component as child in App.js. This solution is suggested in: https://www.cuttlesoft.com/infinitely-dispatching-actions-react-redux-react-router-v4/

Nevertheless, I do not 100% understand why this loop is created. I m a bit confused that the functional wrapper is still an often suggested method for redirection, although it seems not to work with dispatching a redux action in the child component.