react componentDidMount not firing

Question

I set up a new react project and for some reason, the componentDidMount method is not being called.

I have verified this behavior by placing a call to console.log in componentDidMount but I cannot see its output in the console.

Furthermore, this.setState() is not working.

I'm pretty stumped as to why the componentDidMount is not being called. I tried using both React "v0.14.0" and "v0.14.3".

Why is 'componentDidMount' not being called?

Code:

var React = require('react');

var RecipePage = React.createClass({
  componentDidMount: function() {
    console.log('mounted!');
  },
  render: function() {
    return (
      <div>Random Page</div>
    );
  }
});

module.exports = RecipePage;

Do you actually use `RecipePage` somewhere somehow? You are exporting something else. — zerkms, Nov 30 '15 at 01:28
Hi @zerkms. Edited my code so that the referenced export name matches "RecipePage". Darn...still getting the same error... — user3295436, Nov 30 '15 at 03:07
@zerkms Meant to say that I'm getting the same result...as in the "console.log" inside the componentDidMount isn't firing. The component renders but anything past "getInitialState" and "render" doesn't go through — user3295436, Nov 30 '15 at 16:34

score 55 · Answer 1 · answered Jul 15 '16 at 16:09

55

This happened to me when I had componentWillMount() defined 2x in the same class. This did not produce a runtime error. I simply removed the second definition and things started working.

answered Jul 15 '16 at 16:09

P.Brian.Mackey

43,228
68
238
348

2

Quick fix! Thanks.. This seems to be a honest mistake. Even I ended up adding 2 componentDidMount's in same class resulting the first one being overridden.. Thanks! – Zohair Sep 02 '16 at 06:56

score 30 · Accepted Answer · answered Nov 30 '15 at 20:51

So... lo and behold.... I finally got it working(with the help of a back-end expert). The reason why the "componentDidMount" methods weren't firing was because my server was bundling and serving all the react + html stuff on server side. (Only "render" and "getInitialState" methods get called to create the "html" template that gets delivered through the client's browser...but it stops there because it thinks it's finished)

The fix: Find a way to deliver the resulting "compiled" html through the server AND in addition, allow react's own events to be accessible and "fireable" again on the client side. When compiling my "view" file( index.js or index.html ), I included an "Application.start()" script that injects my bundle.js code into the template again. Then in my gulpfile, exported the "Application" variable so the "view" file can access it.

Gahh...pulled my hair out for this. Time to read up on server side vs. client side rendering

I'm actually having the same exact problem. I'm calling componentDidMount() in a parent and child component. It fires in the the child, but not the parent component. I'm not quite understanding what you did to fix it. — vtj205, Dec 01 '15 at 15:10
@vtj205 Interesting problem. Your problem's a bit different than mine since in all my components(child + parent), the "componentDidMount" didn't fire. In your case, check if there's any typo's. If "componentDidMount" is able to fire for a child component, it should be able to fire with your parent component. — user3295436, Dec 02 '15 at 17:10

score 13 · Answer 3 · answered Mar 26 '19 at 17:42

13

In my case, there was another componentDidMount earlier in the code

answered Mar 26 '19 at 17:42

user5480949

1,410
1
15
22

How I can react with a :facepalm:? Thanks mate. – GBrian Apr 27 '20 at 05:59

Sigex · Answer 4 · 2018-09-10T20:46:52.517

I have the create-react-app template. I added the ComponentDidMount into the App Component. I put a console.log and an alert into it. It does not fire and there are no errors in React or the browser. I tried in chrome and firefox.

FIX: what worked for me was rebooting my pc. Then it started working. I do not know why, but this resolve the issue.

Update: Not I have an uppercase 'C' it is 'componentDidMount' not 'ComponentDidMount'.. I think it's time for sleep.

score 5 · Answer 5 · edited Jun 22 '20 at 08:07

In my case, I call componentDidMount() for retrieving data from a service (API call) and on the render function I have components that are supposed to use the data that is returned from this call.

But because the call is Async the render() function is called immediately and then it crashes (many errors like: "TypeError:cannot read property 'XXXX' of undefined" ) then it looks like componentDidMount is not called at all.

To solve this issue I check on render that myData !== null before returning the component itself - You can use generic loader\spinner on this case that will not render internal components that use data before the data that actually retrieve from service.

Example:

componentDidMount() {
    const { GetMyDataFromServiceFunc } = this.props;

    GetMyDataFromServiceFunc ("150288");
}

render() {
    const { details, loading } = this.props;
    
    if (!details)
        return (<GenericLoader />);
        
        return (

        <FullScreenModal
            <Wizard className="order-new-wizard">

                <Component1 editable={false} dataToComponent1={details}
                    goNextStep={this.goNextStep} /> 

                <Component2 values={details.customerDetail} goNextStep={this.goNextStep} />
            </Wizard>
        </FullScreenModal>
        );
    }
}

I had a similar issue. A silent error in the first render call prevented componentDidMount to be called. — meJustAndrew, Jan 24 '23 at 22:40

score 3 · Answer 6 · answered Nov 30 '15 at 01:30

3

You need to change your module.exports to point at RecipePage not TestPage

module.exports = RecipePage;

answered Nov 30 '15 at 01:30

yangli-io

16,760
8
37
47

I changed the export name to match "RecipePage"...was hoping that would fix it but still not getting any results.... any chance this may have something to do with server side? – user3295436 Nov 30 '15 at 03:25
@user3295436 where are you using this RecipePage? – yangli-io Nov 30 '15 at 03:32
RecipePage is a page component called by the React Router. It's a "page" component that gets fetched into the "App" parent component – user3295436 Nov 30 '15 at 16:35

score 1 · Answer 7 · answered Dec 13 '19 at 05:22

1

For me, the reason was upper case "C" in ComponentDidMount.

Changed it to componentDidMount and it worked

answered Dec 13 '19 at 05:22

Ankur Marwaha

1,613
2
15
30

score 1 · Answer 8 · answered Jan 29 '20 at 06:03

1

For me I also declared componentDidUpdate in the class after that componentDidMount started firing as expected.

answered Jan 29 '20 at 06:03

Shounak Bose

990
6
5

score 1 · Answer 9 · answered May 24 '21 at 05:48

1

Although you have a console log statement in your componentDidMount function it may not be executing because that function never gets run. If the error occurs before componentDidMount gets called such as in your render function, you won't see the console log. Try commenting out the code in your render function and see if it appears.

answered May 24 '21 at 05:48

nflauria

847
13
22

thanks for the hint. I didn't expect that – flp Jun 12 '22 at 10:39

score 0 · Answer 10 · answered Oct 30 '18 at 16:20

0

In my case, I imported a component without the export default command in the imported file. When I fixed this, componentDidMount started firing...

answered Oct 30 '18 at 16:20

King

2,128
1
15
15

score 0 · Answer 11 · answered Apr 04 '21 at 19:48

0

For me, I had onComponentDidMount() instead of componentDidMount() facepalm

answered Apr 04 '21 at 19:48

Marlo

490
3
7
21

score 0 · Answer 12 · answered Jan 09 '23 at 10:35

0

componentDidMount did not fire for me because I mistakenly called it twice. Also, it will not show any console error. Removing one of them worked perfectly.

answered Jan 09 '23 at 10:35

Raju Ahmed

380
5
11

react componentDidMount not firing

12 Answers12

Linked