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

Answer 1

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.

Answer 2

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

module.exports = RecipePage;

Answer 3

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

Changed it to componentDidMount and it worked

Answer 4

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

Answer 5

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>
        );
    }
}

Answer 6

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