React: componentDidMount is called before render is completly done

[allochi]

Hi,

As much as I understand React component lifecycle, componentDidMount() should fire after render() is done, but I just found out today that this is not the case, and I'm not sure if this is a bug or lack of understanding from my side.

If I call a function that return some jsx inside render(), it always run after componentDidMount(), so if I have this setup, componentDidMount() always finish before _renderTable() or _renderMessage()

export default class Table extends React.Component {
componentDidMount() {
...
}

render() {
  const content = this.props.valid ? this._renderTable() : this._renderMessage()
  return (
    {content}
  )
}
_renderTable() {...}
_renderMessage() {...}
}

Am I missing something? or is it some bug? Thanks!

[jimfb]

If componentDidMount() gets called before renderTable() or renderMessage(), that sounds like a bug. I'm fairly skeptical that's actually happening, but if you can provide a jsfiddle (using console.logs) that demonstrates the issue, we can investigate further.

[allochi]

Hey, thanks for your reply, this jsfiddle https://jsfiddle.net/jfmwLxb6/1/ shows what I'm talking about, check the console and you will see that it logs:

componentWillMount is done.
_renderSomething is called.

I found out about this today when I was trying to call a jquery library tablesort() on the html table, 'jquery did not find the table, but it did find everything else coded directly in the render() function, when I copy the content of what _renderTable() and _renderMessage() suppose to return, jquery found the table.

I ended up moving both the table and the message to their own separate components, call the required jquery functions from their componentDidMount(), and then include them in one parent component.

I hope that either my confusion or that bug get resolved :D, I just love React!

[jimfb]

:%s/componentWillMount/componentDidMount/g

[allochi]

Ooops, Thanks a lot, I'm really sorry for that :D

[nicmesan]

Hey guys, having the same issue. I am not quite sure how did you solve this @allochi @jimfb

Thanks!

[aweary]

@nicoms91 can you share a jsfiddle reproducing? Make sure you're using componentDidMount and not componentWillMount.

[nicmesan]

OK, I checked and seems that I was doing something wrong. Nevertheless, I am not sure which would be the best solution for this case:

Need to load my main component and, in case a localstorage with the pair value logged: true exists. redirect to "/app" using react-router.

I am using react-redux and this is my code:

class Main extends Component {

  componentWillMount(){
// Return true in redux state if localstorage is found
      this.props.checkLogStatus();
  }

  componentDidMount(){
// redirect in case redux state returns logged = true
      if(this.props.logStatus.logged){
          console.log('entered if statement');
          hashHistory.push('/app');
      }
  }

  render() {
    return (
    <App centered={true} className="_main">
        {this.props.children}
    </App>
    );
  }
}

My redux action:

checkLogStatus() {
  // check if user is logged and set it to state
  return { 
      type: LOGIN_STATUS,
      payload: window.localStorage.sugarlockLogged === "true"
  };
}

But when the component gets to the componentDidMount stage, my redux state has still not been updated.

Y manage to get this to work by using:

componentWillReceiveProps(nextProps){
      if (nextProps.logStatus.logged && nextProps.logStatus.logged !== this.props.logStatus.logged){
          hashHistory.push('/app');
      }
  }

But I am not sure it is the most elegant solution.

Thanks in advance!

[gaearon]

If you’re sure it’s a bug in React please provide an example reproducing it with React.
If not, please ask for help on StackOverflow. We use the issue tracker for tracking bugs in React.
Thanks!

[ABHINESHRENIKUNTA]

Hey guys i have a issue with componentdidmount and componentdidupdate these are called before render method only if i render a large size table with 532 files data in a table.