Styjun

I have, what should be a simple issue in which, when a user navigates to a specific route, the component fires an initial function call to grab a user by ID via a redux-observable in an epic. However, if the user navigates away from the page and then comes back, I need to be able to reload the page, based on a route parameter.

I have a component that utilizes an HOC to run the render() method, but it looks like a dumb component:

const ProfilePage = props => 
 const actions, user, loading = props;

 // Note: This if statement results in an error
 if (user && user.id !== props.params.id) 
 actions.initAction(props.params.id);
 

 return (<div>Test</div>);
;

ProfilePage.propTypes = 
 actions: PropTypes.object,
 user: PropTypes.object,
 loading: PropTypes.bool,
;


export default connect(
 state => (
 user: selectUser(state),
 loading: selectLoading(state),
 ),
 dispatch => ( actions: bindActionCreators(Actions, dispatch) )
)(
 PureRender(
 onMount(props => props.actions.initAction(props.params.id))(ProfilePage)
 )
);

This results in an error:

react-dom.development.js?61bb:506 Warning: Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

^ This happens because of my if statement that checks the user id against the params id.

Does this component need to be converted into a class in order to utilize other life cycle methods that could prevent this error from happening and run my functionality accordingly?

Function component should be pure, you can think of them as the "render" method of a class component.

You can either use a class component and do side effects in componentDidMount / componentDidUpdate, or use hooks with useEffect.

hooks useEffect / class cycle methods

I am guessing the issue is with ProfilePage. Added error Cannot update during an existing state transition (such as withinrender). thrown mostly when a setState which is a async method, another setState gets called. For your case it's a functional component which you are using it in render method. So basically each time your component rerenders ProfilePage function gets called which calls the action. So you might wanna change ProfilePage this to a react component and use life cycle methods such as componentDidMount to fix your issue.
Or if you are using react 16 or above use hooks with useEffect.