Reactjs props keep getting re-rendered - reactjs

Question

I am pretty newbie to react and its lifecycles, I am trying to get a specific profile data that created a specific post. I am able to receive data from the profile props but it has a strange behavior.
So when I console.log(profile) in render method, profile stays null along with rendering post list, then I get the value from the props, then it goes back to null again and eventually I am able to see the profile that exists. But during that loading, spinner and data blinks based on profile props.
Is it a good a idea to initialize a state with profile props? Or how could remove this behavior?
class PostItem extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.getProfileByUserId(this.props.post.user);
}
render() {
const { post } = this.props;
let username = ''
const { profile,loading } = this.props.profile;
if (!profile ) {
username = (
<span className={styles['username-style']}> {post.name + " "}</span>)
} else {
username = (
<Link to={`/profile/${post.user}`} className={styles["profile-link"]}>
{post.name + " "}
</Link>)
}
let postItemListView = "";
if (loading) {
postItemListView = (
<Grid>
<Grid.Column>
<Segment raised>
<Placeholder>
<Placeholder.Header image>
<Placeholder.Line />
<Placeholder.Line />
</Placeholder.Header>
<Placeholder.Paragraph>
<Placeholder.Line length="medium" />
<Placeholder.Line length="short" />
</Placeholder.Paragraph>
</Placeholder>
</Segment>
</Grid.Column>
</Grid>
);
} else {
postItemListView = (
<Link to={`/post/${post._id}`}>
<div className={styles["link-wrapper"]}>
<Grid>
<Grid.Column width={16}>
<Grid.Row style={{ padding: "10px 0" }}>
<h4 className={styles["subject-style"]}>
{post.subject.charAt(0).toUpperCase() +
post.subject.slice(1)}
</h4>
</Grid.Row>
<Grid.Row style={{ padding: "10px 0" }}>
<div className={styles["body-style"]}>{post.text}</div>
</Grid.Row>
<Grid.Row>
<div className={styles["detailed-text__style"]}>
{username}
created {moment(post.createdAt).fromNow()}
</div>
</Grid.Row>
</Grid.Column>
</Grid>
</div>
</Link>
);
}
return <div>{postItemListView}</div>;
}
}
PostItem.propTypes = {
post: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
getProfileByUserId: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
profile: state.profile
});
export default connect(
mapStateToProps,
{ getProfileByUserId }
)(React.memo(PostItem));
EDIT:
This how API requests happen in redux:
export const getProfiles = () => dispatch => {
dispatch(setProfileLoading());
axios
.get(`${PROFILE_API_URL}/all`)
.then(res =>
dispatch({
type: GET_PROFILES,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_PROFILES,
payload: null
})
);
}
And this is the reducer for profile:
import {
GET_PROFILE,
GET_PROFILES,
PROFILE_LOADING,
CLEAR_CURRENT_PROFILE
} from 'actions/types';
const initialState = {
profile: {},
profiles: [],
loading: false
};
export default function(state = initialState, action) {
switch (action.type) {
case PROFILE_LOADING:
return {
...state,
loading: true
};
case GET_PROFILE:
return {
...state,
profile: action.payload,
loading: false
};
case GET_PROFILES:
return {
...state,
profiles: action.payload,
loading: false
};
case CLEAR_CURRENT_PROFILE:
return {
...state,
profile: null
};
default:
return state;
}
}

Answer 1

ok I'm not entirely sure of the problem in your app but I think you should do something like this
class PostItem extends Component {
constructor(props) {
super(props);
this.state = {
profile: null;
loading: true;
}
}
async componentDidMount() {
// make api request here and make it async
await const result = this.props.getProfileByUserId(this.props.post.user);
this.setState({profile: result, loading: false})
}
render() loading? (
<div> Loading... </div>
) : (
<div>
<Profile />
</div>
)
}
slight pseudo code but let me know if that helps?