title: Reactjs props keep getting re-rendered
body: <p>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. </p>
  
  <p>So when I <code>console.log(profile)</code> 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. </p>
  
  <p>Is it a good a idea to initialize a state with profile props? Or how could remove this behavior?</p>
  
  <pre><code>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 = (
             &lt;span className={styles['username-style']}&gt;  {post.name + " "}&lt;/span&gt;)
      } else {
         username = (
          &lt;Link to={`/profile/${post.user}`} className={styles["profile-link"]}&gt;
             {post.name + " "}
          &lt;/Link&gt;)
      }
  
      let postItemListView = "";
      if (loading) {
         postItemListView = (
         &lt;Grid&gt;
          &lt;Grid.Column&gt;
           &lt;Segment raised&gt;
            &lt;Placeholder&gt;
              &lt;Placeholder.Header image&gt;
                &lt;Placeholder.Line /&gt;
                &lt;Placeholder.Line /&gt;
              &lt;/Placeholder.Header&gt;
              &lt;Placeholder.Paragraph&gt;
                &lt;Placeholder.Line length="medium" /&gt;
                &lt;Placeholder.Line length="short" /&gt;
              &lt;/Placeholder.Paragraph&gt;
            &lt;/Placeholder&gt;
          &lt;/Segment&gt;
        &lt;/Grid.Column&gt;
      &lt;/Grid&gt;
    );
  } else {
    postItemListView = (
      &lt;Link to={`/post/${post._id}`}&gt;
        &lt;div className={styles["link-wrapper"]}&gt;
          &lt;Grid&gt;
            &lt;Grid.Column width={16}&gt;
              &lt;Grid.Row style={{ padding: "10px 0" }}&gt;
                &lt;h4 className={styles["subject-style"]}&gt;
                  {post.subject.charAt(0).toUpperCase() +
                    post.subject.slice(1)}
                &lt;/h4&gt;
              &lt;/Grid.Row&gt;
              &lt;Grid.Row style={{ padding: "10px 0" }}&gt;
                &lt;div className={styles["body-style"]}&gt;{post.text}&lt;/div&gt;
              &lt;/Grid.Row&gt;
              &lt;Grid.Row&gt;
                &lt;div className={styles["detailed-text__style"]}&gt;
                  {username}
                  created {moment(post.createdAt).fromNow()}
                &lt;/div&gt;
              &lt;/Grid.Row&gt;
            &lt;/Grid.Column&gt;
          &lt;/Grid&gt;
        &lt;/div&gt;
      &lt;/Link&gt;
    );
  }
  
  return &lt;div&gt;{postItemListView}&lt;/div&gt;;
   }
  }
  
  PostItem.propTypes = {
    post: PropTypes.object.isRequired,
    profile: PropTypes.object.isRequired,
    getProfileByUserId: PropTypes.func.isRequired
  };
  
  const mapStateToProps = state =&gt; ({
     auth: state.auth,
     profile: state.profile
   });
  
  export default connect(
    mapStateToProps,
   { getProfileByUserId }
   )(React.memo(PostItem));
  </code></pre>
  
  <p><strong>EDIT:</strong>
  This how API requests happen in redux:</p>
  
  <pre><code>export const getProfiles = () =&gt; dispatch =&gt; {
    dispatch(setProfileLoading());
    axios
      .get(`${PROFILE_API_URL}/all`)
      .then(res =&gt;
         dispatch({
         type: GET_PROFILES,
         payload: res.data
       })
     )
     .catch(err =&gt;
       dispatch({
       type: GET_PROFILES,
       payload: null
     })
    );
   }
  </code></pre>
  
  <p>And this is the reducer for profile:</p>
  
  <pre><code>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;
       }
    }
  </code></pre>